flex布局

flex全名是flexible box。有一个小游戏可以方便的练习这些属性：http://www.css88.com/tool/flexboxfroggy/

2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

容器属性

flex-wrap指定项目是否换行
nowrap 不换行 默认值
wrap 换行 正序排列
wrap-reverse 换行 倒序排列

flex-direction决定项目排列的方向
row:默认水平方向（从左向右）
row-reverse:水平方向（从右向左）
column:垂直方向（从上向下）
column-reverse:垂直方向（从下向上）

flex-flow是以上2个的缩写形式
属性书写顺序：flex-flow：flex-wrap flex-direction;
flex-flow: wrap row;

justify-content决定项目在主轴上的对齐方式
flex-start：沿左侧对齐
center：沿中间对齐
flex-end：沿右侧对齐
space-around：均匀分布，两侧留白相等
space-between：项目靠两侧对齐

align-items决定项目沿交叉轴的对齐方式（以默认从上到下为例）
flex-start:沿上方对齐
center：沿中间对齐
flex-end：沿下方对齐
baseline：沿文字基线对齐
stretch：默认值 填满正规交叉轴空间

align-content决定轴线的对齐方式(只有换行，产生多根轴线才有效)
flex-start:沿交叉轴起点对齐
center:沿交叉轴中点对齐
flex-end:沿交叉轴结束点对齐
space-between:沿交叉轴两侧对齐
space-around:沿交叉轴均匀分布，留白相等
stretch:填满整个交叉轴空间，默认值

项目属性

flex-grow:[number]决定项目放大比例，填满主轴剩余空间
number 为一个数值，默认为0 不放大，值越大，放大比例越大

flex-shrink：[number]决定项目缩小的比例
number 为一个数值，默认为1 自动缩小，值越大，缩小比例越大

flex-basis放大或缩小的基准值
auto：使用项目本身大小
pixel：使用指定的像素渣
percent：使用指定的百分比
   100%  当wrap时，项目占整个容器的宽度
      当nowrap时，占容器主轴剩余的宽度，其它放大无效

flex 是flex-grow flex-shrink flex-basis的缩写

align-self决定项目自身的对齐方式（相对于交叉轴）
flex-start:沿上方对齐
center：沿中间对齐
flex-end：沿下方对齐
baseline：沿第一个文字基线对齐
stretch：默认值 填满正规交叉轴空间

order【number】决定项目的顺序，默认为0，值越小越靠前，可接收负值