CSS之Flex布局（弹性布局）

   传统的布局方案：基于**盒子模型**依赖 display属性+position属性+floats属性。用这种方案实现特殊布局，例如 垂直居中 就不容易实现。

 2009年w3c提出的新的解决方案——Flex布局（弹性布局）：响应式的实现各种页面布局。

可以将任一容器指定为Flax布局：

.box{
	display:flex;
}

行内元素也可以适用flex布局：

.box{
	display:inline-flex;
}

如果是webkit内核的浏览器，在设置时需要在flex前加上-webkir：即-webkit-flex

需要注意设置Flex布局会使子元素的float、clear和vertical-align属性失效

基本概念

采用Flex布局的元素称之为容器，他的所有子元素自动成为容器成员，称之为flex item（项目）。

容器的属性：

属性1：flex-direction  //决定主轴的方向（项目排列方向）。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

属性2：flex-wrap  //一行放不下时如何换行
nowrap:不换行