flex布局基本概念

Flex 布局是什么？
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box{
  display: flex;
}
行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}
Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

整体框架

Flex解决了传统前端开发中的很多痛点，使得页面布局更加方便，就看看他是怎么做到的吧

Alt text

轴向

主轴：flex-direction四个方向

Alt text

交叉轴：flex-wrap两个方向

Alt text

对齐

Alt text

主轴justify-content属性

Alt text

伸缩情况

盒子足够大
Alt text

盒子刚刚好

弹性伸缩
Alt text

交叉轴

只有一行alight-items
Alt text

多行align-content

Alt text

结合使用align-content+alight-items

既让子元素在容器交叉轴居中，又让子元素在所在行的交叉轴居中
Alt text

弹性

Alt text

宽度flex-basis

四种情况下容器大小

auto：元素的大小
像素：flex-basis的值
百分比：占父容器的比例
0或0%：初始宽度为0

Alt text

优先级

Alt text

宽度受最大最小限制

Alt text

eg：初始为100，最小为200，最后显示200px

Alt text

扩展flex-grow

扩展的是父容器剩余的而空白
按比例从0~1划分
Alt text

flex-grow=0

此时不会扩展
Alt text

flex-grow=0.5

占用剩余的一半
Alt text

flex-grow=1

剩下的全部占完
Alt text

收缩flex-shrink

Alt text

1:1:1

开始时三个子元素超出父容器
Alt text

三个子元素都设置成flex-shrink：1

将会1:1:1收缩
Alt text

中间flex-shrink：0

A2不收缩，A1、A3按宽度占满剩下空间
A1=25
A2=200
A3=75
Alt text

中间flex-shrink：2

按照1:2:1收缩，也就是说都要收缩不过A2收缩幅度是其他元素的2倍
A1=25
A2=50
A3=225
Alt text

三个属性可以合并写成flex

Alt text

案例

主轴交叉轴同时对齐

display：flex 使用flex布局
Alt text

三行三列布局

从上到下

主轴方向默认从左到右，要想实现下图header在上fotter在下的样式，第一步先设置flex-direction为column。就实现了下图的效果

Alt text

从左到右

将container设置为flex容器，再将左右两边元素宽度设置为100，中间设置为flex：1=flex-grow：1就实现了下图的效果

Alt text