概念：随着互联网的发展，对于网页布局来说要求越来越很高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
2009年·W3C提出了一种新方案——flex布局，可以简便、完整、响应式的实现各种页面布局。目前，它得到了所有浏览器的支持，这意味着，现在就能很安全的实现这一项功能。其语法如下：
Flex弹性盒模型优势：我们可以利用弹性盒模型很方便的实现子元素在父容器中水平和垂直方向都居中。代码与运行结果如下：
只需要在父盒子上加display：flex；就能使父盒子形成一个弹性盒子，这个时候子元素加上margin：auto；就能使子元素在水平方向和垂直方向都居中了。并且不论容器变大变小，子元素都能很好地自适应居中。
Flex弹性盒模型属性：
一、加在父容器上的属性：
1.Flex-direction：用来控制子项整体布局方向，是从左往右还是从右往左，
是从上往下还是从下往上。其属性值如下表：
（1）默认情况属性值为row下子元素排列情况如下：
首先，我们可以看到在不加flex-direction时子元素的排列是从左往右的，在弹性盒子中是靠左和靠上的，所以这就是默认情况下子元素的排列情况。
（2）属性值为row-reverse下子元素排列情况如下：
（3）属性值为column下子元素排列情况如下：
（4）属性值为column-reverse下子元素排列情况如下：
2.flex-wrap：用来控制子项整体单行显示还是换行显示。其属性值如下表：
（1）属性值为默认值时如下图：
此时盒子不会出现溢出情况，因为弹性盒子具有收缩功能，会根据子元素的多少自动进行收缩，但当子元素的内容达到容器的最小宽高时就会出现溢出情况，如下图：
（2）属性值为wrap时如下图：
（3）属性值为wrap-reverse时如下图：
3.flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。如下图：
4.Justify-content：决定了主轴方向（与flex-direction所设置的方向一致）
子项的对齐和分布方式。其属性值如下表：
（1）属性值为flex-start时如下图：
（2）属性值为flex-end时如下图：
（3）属性值为center时如下图：
（4）属性值为space-between时如下图：
（5）属性值为space-around时如下图：
（6）属性值为space-evenly时如下图：
5.align-items：items指的是flex的子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴上的对齐方式。可选值如下表：
（1）属性值为stretch时如下图：
（2）属性值为flex-start时如下图：
（2）属性值为flex-start时如下图：
（3）属性值为flex-start时如下图：（4） 属性值为flex-end时如下图：
6.align-content：可以看成和justify-content是相似并且对立的属性，如果所有flex子项只有一行，则align-content没有任何效果。其属性值如下表：
（1）当属性值为默认值时情况如下图：
（2）当属性值为flex-start时情况如下图：
（3）当属性值为flex-end时情况如下图:
(4)当属性值为center时情况如下图：
(5)当属性值为space-between时情况如下图：
(6)当属性值为space-around时情况如下图：
（7）当属性值为space-evenly时情况如下图：
二、语法作用在子元素上
（1）作用在flex子项上的属性有：
1.子项属性为order时
（1）order为默认值0时的情况如下图：
（2）选择第二个子项div的order为1时的情况如下图：
2.子项属性的flex-grow为1时如下图：
由此可以看出当子项flex-grow属性为1时子项会将剩余的空隙铺满。当为小数时，子项的空间就多占空余空间的几分之几。
3.子项属性为flex-shrink时
（1）属性值为1时
此时父容器中的子项并不会溢出，而是自动收缩。
（2）属性值为0时
4.子项属性为flex-basis时可以指定子项默认大小，如图：
5.子项属性align-self时情况与align-items类似，区别就是align-self只针对子项。