一：简要介绍
网页的传统布局都是依赖与display，定位与浮动来进行布局，但是这样的布局方式并不方便，直到2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能,其中在webkit内核的浏览器中使用时，必须加上**-webkit-**前缀二：flex布局属性介绍
1.flex-direction 决定主轴的方向，即项目排列的方向，有四个值：row(默认)|row-reverse|column|column-reverse row:主轴为水平方向，项目沿主轴从左至右排列column：主轴为竖直方向，项目沿主轴从上至下排列
row-reverse：主轴水平，项目从右至左排列，与row反向
column-reverse：主轴竖直，项目从下至上排列，与column反向
2.flex-wrap 默认情况下，项目排列在一条线上，即主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式，有三个值nowrap(默认)|wrap|wrap-reverse
nowrap：自动缩小项目，不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下面
3.flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4.justify-content
决定项目在主轴上的对齐方式，有五个值flex-start（默认）|flex-end|center|space-between|space-around，以主轴对齐，当前主轴沿水平方向
flex-start：左对齐
flex-end：右对齐
center：居中对齐
space- between：两端对齐
space-around：沿轴线均匀分布
5.align-items
决定了项目在交叉轴上的对齐方式，有五个值flex-start|flex-end|center|baseline|stretch，当前主轴沿水平方向
flex-start：顶端对齐
flex-end：底部对齐
center：居中对齐
baseline：与第一行文字的底部对齐
stretch：如果项目未设置高度或设为auto，将与容器高度一致
6.align-content
align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起效果，有六个值flex-start | flex-end | center | space-between | space-around | stretch（默认值）
flex-start：顶端对齐
flex-end：底部对齐
center：居中对齐
space- between：两端对齐
space-around：沿轴线均匀分布
stretch：轴线占满整个交叉轴
三：项目的属性介绍
共有六个 order|flex-grow|flex-shrink|flex-basis|flex|align-self1.order
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2.flex-grow
属性如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项目多一倍
3.flex-shrink
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小，但flex-shrink属性为0的不缩小，注意：负值对该属性无效
4.flex-basis
表示项目在主轴上占据的空间，默认值为auto
5.flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,数值越大得到的空间越大，负值对该属性无效
6.align-self
align-self属性允许item有自己独特的在交叉轴上的对齐方式，有六个值
auto（默认）：继承父元素align-self的值
flex-start：顶端对齐
flex-end：底部对齐
center：竖直方向上居中对齐
baseline：第一行文字的底部对齐
stretch：与容器等高对齐
