Flex Box
-
Flex Box即弹性布局
-
display: flex- 在没有设置容器宽度时，默认情况下占一整行宽度，高度根据所有item自适应。
.cusContainer { display: flex; } -
display: inline-flex- 在没有设置容器宽高时，容器根据所有item内容的宽高自适应容器的宽度。
.cusContainer { display: inline-flex; }
一、flex-direction（容器属性）
设置容器内 item 排列方向
row（默认值）
- 容器内item沿主轴
从左到右排列
row-reverse
- 容器内item沿主轴
从右到左排列
column
- 容器内item沿主轴
从上到下排列
column-reverse
- 容器内item沿主轴
从下到上排列
二、flex-wrap（容器属性）
设置容器内是否允许多行item排列，及多行item排列时换行方向
nowrap（默认值）
不换行。容器内item仅有单行，如果单行内容过多则溢出容器。
wrap
- 容器单行容不下所有item时，
换行排列。
wrap-reverse
- 容器单行容不下所有item时，
换行排列。 - 换行方向为wrap时的
反方向。
三、justify-content（容器属性）
容器内item沿主轴方向的对齐方式
flex-start(默认值)
- 容器内item
在主轴起点紧挨在一起，item间不留空隙；
flex-end
- 容器内item
在主轴终点紧挨在一起，item间不留空隙；
center
- 容器内item
在主轴上居中紧挨在一起，item间不留空隙；
space-between
- 容器内item在主轴方向上
间距相等，第一个和最后一个item离主轴距离为0；
space-around
- 容器内item在主轴方向上
间距相等，第一个和最后一个item离主轴距离为item间距一半；
space-evenly
- 容器内item在主轴方向上
间距相等，第一个和最后一个item离主轴距离和item间距相等。
四、align-content（容器属性）
多行排列时，容器内item沿交叉轴方向的对齐方式
stretch（默认值）
- 当容器内item未设置尺寸，将item
拉伸至填满交叉轴。 - 当设置了item尺寸时，设置过的width或height不受该属性影响。
flex-start
- 容器内item
在交叉轴起点紧挨在一起，item间不留空隙；
flex-end
- 容器内item
在交叉轴终点紧挨在一起，item间不留空隙；
center
- 容器内item
在交叉轴上居中紧挨在一起，item间不留空隙；
space-between
- 容器内item在交叉轴方向上
间距相等，首行和尾行item离交叉轴距离为0；
space-around
- 容器内item在交叉轴方向上
间距相等，首行和尾行item离交叉轴距离为item间距一半；
space-evenly
- 容器内item在交叉轴方向上
间距相等，首行和尾行item离交叉轴距离和item间距相等。
五、align-items（容器属性）
容器内item沿交叉轴方向的对齐方式
align-items一般用于一行，
align-content一般用于多行，针对单行无效，
两个属性值很相似。
stretch（默认值）
- 当容器内item未设置尺寸，将item
拉伸至填满交叉轴。 - 当设置了item尺寸时，设置过的width或height不受该属性影响。
flex-start
- 容器内item
在交叉轴起点紧挨在一起，item间不留空隙；
flex-end
- 容器内item
在交叉轴终点紧挨在一起，item间不留空隙；
center
- 容器内item
在交叉轴上居中紧挨在一起，item间不留空隙；
baseline
- 容器内以item中的
第一行文字的基线对齐；
六、order（item属性）
设置item沿主轴方向的排列顺序，order的值为整数，值越小，排列越靠前。
7. flex-shrink（item属性）
设置item沿主轴方向的收缩因子，flex-shrink是默认值为1的非负数， 尽量让所有item收缩因子相加大于1
例如：
容器width为400px，item宽度如下：
item1 = 120px; item2 = 150px; item3 = 180px;
所有item宽度相加比容器大50px，需要压缩每个item的大小，具体计算方法如下：
1. 总溢出空间 = 50;
2. 计算总权重（各个item的(width * 收缩因子)相加）
总权重 = 120 * 2 + 150 * 3+ 180 * 1 = 870;
3. item压缩大小 = 总溢出空间 * item width * flex-shrink / 总权重;
item1的最终宽度为：120 - 50 * 120 * 2 / 870 ≈ 106px
item2的最终宽度为：150 - 50 * 150 * 3 / 870 ≈ 124px
item3的最终宽度为：180 - 50 * 180 * 1 / 870 ≈ 169px
8. flex-grow（item属性）
设置item沿主轴方向的扩张因子，flex-grow是默认值为0的非负数， 尽量让所有item扩张因子相加大于1
例如：
容器width为400px，item宽度如下：
item1 = 80px; item2 = 120px; item3 = 140px;
所有item宽度相加比容器小60px，需要扩张每个item的大小，具体计算方法如下：
1. 总剩余空间 = 60;
2. 计算权重（总剩余空间/(所有item扩张因子相加)）
权重 = 60 / (3 + 1 + 0) = 15；
3.
item1的最终宽度为：80+ (15 * 3) = 125
item2的最终宽度为：120 + (15 * 1) = 135
item3的最终宽度为：140 + (15 * 0) =140
9. flex-basis（item属性）
设置item宽高
-
当
flex-direction为row或row-reverse，如果flex-basis和width同时存在，flex-basis优先级高于width（即代替width） -
当
flex-direction为column或column-reverse，如果flex-basis和height同时存在，flex-basis优先级高于height（即代替height） -
默认值：
auto， 单位：<number>px
10. flex（item属性）
flex是flex-grow、flex-shrink、flex-basis的简写
- 默认值为
none，等价于0 0 auto auto等价于 1 1 auto
11. align-self（item属性）
用于覆盖容器的align-items，表示沿交叉轴方向的对齐方式
- 默认值为
auto，继承容器的align-items值。
