flex布局（弹性布局）

前言

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

开启flex布局

display: flex / inline-flex;

flex： 将对象作为弹性伸缩盒显示
inline-flex：将对象作为内联块级弹性伸缩盒显示 

在父类中设置的样式

flex-direction：子类在主轴上的分布

flex items默认都是沿着main axis（主轴）从main start 开始往main end 方向排布

flex-direction决定了main axis的方向，有4个取值：

1. row（默认）：从左往右
2. row-reverse：从右往左
3. column：从上往下
4. column-reverse：从下往上

效果如下

 justify-content：子类在主轴上的对齐方式 

 justify-content决定了flex items在main axis 上的对齐方式，共6个取值：

1. flex-start（默认值）：与 main start 对齐
2. flex-end：与 main end 对齐
3. center：居中对齐
4. space-between：flex items之间的距离相等，与main start、main end两端对齐
5. space-evenly：flex items之间的距离相等，与main start、main end之间距离等于flex items之间的距离
6. space-around：flex items之间的距离相等，与main start、main end之间距离等于flex items之间的距离的一半

效果如下：

align-content：子类在交叉轴上的分布 

 align-content决定了多行flex items在cross axis上的对齐方式，用法和 justify-content类似，共7个取值：

1. stretch（默认值）：与align-items的stretch类似
2. flex-start：与cross start对齐
3. flex-end：与cross end对齐
4. center：居中对齐
5. space-between：flex items之间的距离相等，与cross start、cross end两端对齐
6. space-evenly：flex items之间的距离相等，与cross start、cross end之间距离等于flex items之间的距离
7. space-around：flex items之间的距离相等，与cross start、cross end之间距离等于flex items之间的距离的一半

 align-items：子类在交叉轴上的对齐方式

align-items决定了flex items在cross axis上的对齐方式，共6个取值：

1. normal：在弹性布局中，效果和stretch一样
2. stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
3. flex-start：与cross start对齐
4. flex-end：与cross end对齐
5. center：居中对齐
6. baseline：与基准线对齐

  flex-wrap：子类的多行显示

flex-wrap决定了flex container是单行还是多行，共3个取值：

1. nowrap（默认）：单行
2. wrap：多行
3. wrap-reverse：多行（对比wrap，cross start与cross end相反）

 在子类中设置的样式

flex-grow：子类的扩展

flex-grow决定了flex items如何扩展

• 可以设置任意非负数字（正小数、正整数、0），默认值为0
• 当flex container在main axis方向上有剩余size时，flex-grow属性才会有效

如果所有flex items的flex-grow总和sum超过1

• 每个flex items扩展的size = flex container的剩余size*flex-grow / sum

如果所有flex items的flex-grow总和sum不超过1

• 每个flex items扩展的size = flex container的剩余size*flex-grow

flex items扩展后的最终size不能超过max-width 、max-height

 flex-shrink：子类的收缩

 flex-shrink决定了flex items如何收缩

• 可以设置任意非负数字（正小数、正整数、0），默认值为1
• 当flex items在main axis方向上超过了flex container的size时，flex-shrink属性才会有效

align-self：子类在交叉轴上的对齐方式

flex items可以通过align-self覆盖flex container设置的align-items，共6个取值：

1. auto（默认值）：遵从flex container设置的align-items
2. stretch、flex-start、flex-end、center、baseline，效果和align-items一样

flex

flex是flex-grow，flex-shrink、flex-basis的简写，flex属性可以指定1/2/3个值

单值语法：

值必须为以下其中之一:

1. 一个无单位数：它会被当做flex-grow的值
2. 一个有效的宽度值：它会被当作flex-basis的值
3. 关键字none、auto或initial

双值语法：

第一个值必须为一个无单位数，并且它会被当作flex-grow的值

第二个值必须为以下之一：

1. 一个无单位数：它会被当做flex-shrink的值
2. 一个有效的宽度值：它会被当作flex-basis的值

三值语法：

第一个值必须为一个无单位数，作为flex-grow的值

第二个值必须为一个无单位数，作为flex-shrink的值

第三个值必须为一个有效的宽度值：它会被当作flex-basis的值