Flex布局

前言：
首先布局的传统解决方案，基于盒状模型，依赖display 属性+ position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
所以，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
我们可以通过[下一篇文章]给出常见布局的 Flex 写法(http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)

使用flex

采用 Flex 布局的元素，称为 Flex 容器，它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
Flex布局是css3中新增的一种布局方式，他大多用于移动端中，在PC端中用的比较少。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

在PC端中呢会存在一些兼容性的问题，因为flex是css3中新增的一些布局方式，旧版本的浏览可能不支持，所以有时候需要添加浏览器兼容的前缀来解决。
Flex 布局，可以简便、完整、响应式地实现各种页面布局，任何一个容器都可以指定为 Flex 布局，行内元素也可以使用 Flex 布局。
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
我在项目中常用到的有九宫格布局，列表布局等，都会经常用到。
Flex的属性：

flex-direction 属性决定主轴的方向（即项目的排列方向）。
flex-flow 属性是flex-grow, flex-shrink 和 flex-basis的简写
justify-content 属性定义了项目在主轴上的对齐方式
align-items 属性定义项目在交叉轴上如何对齐
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

它能有4个值

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。