布局的传统解决方案，基于盒状模型，依赖display属性+position属性+float属性。

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

1、开启flex

display:flex|inline-flex

说明：

flex：将对象作为弹性伸缩盒显示

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

2、弹性容器的属性

（1）flex-direction:row|row-reverse|column|column-reverse

说明：设置元素在主轴上的分布。

row：从左向右

row-reverse：从右向左

column：从上向下

column-reverse：从下向上

（2）flex-wrap:nowrap|wrap|wrap-reverse

说明：设置元素一条轴线排不下，如何换行。

nowrap：不换行

wrap：换行

wrap-reverse:反向换行

（3）flex-flow：flex-direction和flex-wrap的简写

例如：flex-flow:row wrap;

（4）justify-content:flex-start|flex-end|center|space-between|space-evenly|space-around

说明：设置元素在主轴上的对齐方式

flex-start：向开始端靠拢

flex-end：向结束端靠拢

center：居中

space-between：平均分布，两边无间距

space-evenly：平均分布，两边有间距，且和中间间距一样

space-around：平均分布，两边有间距，且是中间间距的一半

（5）align-items:normal|stretch|flex-start|flex-end|center|baseline

说明：设置元素在交叉轴上的对齐方式

stretch：拉伸，若元素设置宽度或高度则无效

flex-start：向开始端靠拢

flex-end：向结束端靠拢

center：居中

baseline：与基准线对齐

（6）align-content:stretch|flex-start|flex-end|center|space-between|space-evenly|space-around

说明：设置多轴线的对齐方式（即多行或多列的排列）

3、弹性元素的属性

（1）order:数值
说明：设置元素顺序，数值越小越靠前，默认值为0

（2）align-self:auto|stretch|flex-start|flex-end|center|baseline

说明：设置元素在交叉轴上的对齐方式，会覆盖容器的align-items属性

（3）flex-grow:数值

说明：设置元素的放大比例（有剩余空间才放大），默认值为0

（4）flex-shrink:数值

说明：设置元素的缩小比例（空间不足才缩小），默认值为1

（5）flex-basis:数值及单位

说明：设置元素的长度，单位有%、px、em等，默认值为auto  

（6）flex：flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto

flex属性可以指定1、2或3个值：

一个值：无单位为flex-grow的值；有单位为flex-basis的值；auto为1 1 auto；none为0 0 auto。

两个值：无单位+无单位为flex-grow和flex-shrink的值；无单位+有单位为flex-grow和flex-basis的值。

三个值：无单位+无单位+有单位为flex-grow、flex-shrink和flex-basis的值。