Flex布局

1. Flex布局简介
       Felx在项目开发时，运用起来对于页面的布局是很方便的，比如较经典的布局中盒子居中，就可以用flex布局进行快速解决。
       如下面的简单操作，只需要在父级盒子中添加flex布局和设置jusitify-content和align-items值为center即可，快速进行盒装水平和垂直居中。

<div id="item">
	<div id="children">
		I am inner Div
	</div>
</div>

#item {
	width: 200px;
	height: 200px;
	background-color: red;
	display: flex;
	justify-content: center;
	align-items: center;
}
#children {
	width: 100px;
	height: 100px;
	background-color: cyan;
}

    值得注意的是，当盒设置flex布局时，子元素的float、clear和vertical-align属性将失效。
    flex布局中包含容器属性和项目属性，其中容器属性设置在父级盒子中，项目属性作用在子级盒子中。
    ①容器属性包含：

• flex-direction：决定项目的排列方向。属性值为row(水平) | row-reverse(水平的反方向) | column(垂直方向) | column-reverse(垂直的反方向)
• flex-wrap：决定项目如何换行。属性值为nowrap(不换行) | wrap(向下换行) | wrap-reverse(往上换行)
• flex-flow：以上两个属性的简写。默认值为 row nowrap
• justify-content：项目在主轴上的对齐方式。flex-start | flex-end | content | space-between(贴边两边对齐) | space-around(不贴边两边对齐)
• align-items：项目在交叉轴上的对齐方式。felx-start | flex-end | center | baseline | stretch
• align-centent：多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-start | center | stretch | space-between | space-around

    ②项目属性：

• order：定义项目的排列顺序，数值越小，排列越靠前，默认为0 。属性值是 整形integer。
• flex-grow：定义项目的放大比列，默认为0，即如果存在剩余空间，也不放大。属性值是number类型。
• flex-shrink：定义香满园的缩小比例，默认为1 。即空间不足，该项目将会缩小。属性值是number类型，负值无效。注意：当值为0，其他为1，则值为0的不缩小。
• flex-basis：在分配多余空间前，项目占据的主轴空间默认值为auto，即项目本来大小。属性值可为px值。
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。属性值suto | flex-start | flex-end | center | baseline | stretch。
• flex：简写模式 none | [ | ] 。快捷值auto(1 1 auto)、none(0 0 auto)

2. flex 布局的几个问题
   2.1 flex在兼容上的问题
       Flex布局除了chrome浏览器外，其他手机浏览器都没有兼容，所以需要进行兼容处理。

.box{
    display: -webkit-box;/*布局方式 相当于display:flex*/
　　-webkit-box-align: center;/*box的对齐方式 align-items:center;*/
}
.box2{
    display: -webkit-box;
    -webkit-box-orient: vertical;/*排列方式flex-direction: column*/
　　-webkit-box-pack: justify;/*box2的纵向排列方式 justify-content: space-between;*/
    -webkit-box-flex:1; /*box2的伸缩比例 flex:auto;*/
}

    Box布局在W3C中已经列入标准，加上前缀的话，会被各个浏览器支持。
    通过测试，在chrome、安卓、ios上样式和排列都是正常的。