Flex布局

2009年，W3C提出了一种新的方案——Flex布局，可以简便，完整，响应式地实现各种页面布局。目前，得到了所有的浏览器支持。

Flex即“弹性布局”，为盒状模型提供强大的灵活性。

任何一个容器都可以指定为Flex布局。比如块元素和行内元素。

此外，需要注意的一点是，当使用Flex布局后，子元素的float、clear和vertical-align属性会失效。

采用Flex布局的元素会默认存在两根轴：水平的主轴（main axis）

                                                                       垂直的交叉轴（cross axis）

在用Flex布局的容器含有以下6个属性：

flex-direction:决定主轴的方向（其含有的值：row | row-reverse | column | column-reverse      ）

flex-wrap:如果一条轴线排不下，如何换行（其含有的值：nowrap | wrap | wrap-reverse）

flex-flow:上面两个属性的简写。默认值为row nowrap。

justify-content:主轴上的对齐方式（其含有的值为：flex-start | fles-end | center | space-between | space-around）。

align-items:项目在交叉轴上如何对齐（其含有的值为：flex-start | flex-end | center | baseline | stretch）。

align-content:多根轴线的对齐方式（其含有的值为：flex-start | flex-end | center | space-between | space-around | stretch）