display:flex弹性布局

display:flex意思是弹性布局，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为flex布局
.box{
display:flex;
}
注意：在设置为flex布局后，子元素的float。clear和vertical-align属性将失效

容器属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items

flex-direction 决定主轴的排列方式
row为默认值，主轴水平方向，起点在左端 row-reserve起点在右端
column主轴垂直方向，起点在上边沿 column-reserve起点在下边沿

flex-wrap 默认情况下子元素排列在一条轴上，但是可能一条轴排不下
nonwrap为默认值，不换行
wrap换行处理
wrap-rederve反向换行

flex-flow是以上两个的复合写法

justify-content定义在主轴方向上的对齐方式（主轴即水平方向）
flex-start为默认值，左对齐
flex-end 右对齐
flex-center居中
space-between两端对齐，子项间隔相等
space-around 每个子项之间的间隔相等

align-items每一行中子元素的对齐方式
flex-start起点对齐
center中点对齐
flex-end终点对齐

项目属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order属性修改项目的排列顺序(数值越小，排列越靠前)

flex-grow属性用来定义项目的放大比例
0为默认值，即存在剩余空间也不放大项目，如果所有的项目都是flex-grow:1，则会等分剩余空间，如果其中一个的值为2，则其分配的空间是其他的二倍

flex-shrink属性定义项目的缩小比例
1为默认值，即空间不足时，该项目会缩小，如果项目属性全为1，当空间不足时，等比缩小。如果一个项目属性为0，当空间不足时，前者不缩小(负值对该属性无效)

flex-basis分配多余空间之前的项目占据的主轴空间，如果空间不足，该项目也会缩小。

flex属性是flex-grow，flex-shrink和flex-basis的简写
默认值为0 1 auto，第一个属性必须，后两个属性可选。

align-self允许单个项目有与其他的项目不一样的样式，可以覆盖align-items的样式