flex布局

引用自Flex 布局教程

webkit内核的浏览器必须加上-webkit前缀

设为flex布局后，子元素的float， clear和vertical-align属性将失效

水平主轴main axis（main start，main end，main size）
垂直交叉轴cross axis（cross start，cross end，cross size）

容器属性
flex-direction（主轴方向–项目排列方向）：row【默认】 | row-reverse | colum | colum-reverse

flex-wrap（换行）：nowrap【默认】 | wrap | wrap-reverse

flex-flow（flex-direction和flex-wrap的简写）：row nowrap【默认】

justify-content（在主轴上的对齐方式）：flex-start【默认：左对齐】 | flex-end | center | space-between【两端对齐】 | space-around【每个项目两次间隔相对】

align-items（在交叉轴上对齐）：flex-start | flex-end | center | baseline【项目的第一行文字的基线对齐】 | stretch【默认：占满整个容器的高度】

align-content（对多根轴线的对齐方式）：flex-start | flex-end | center | space-between | space-around | stretch
若只设定了一根轴则该属性不起作用

项目属性
order：排序。数值越小，排列越靠前，默认0

flex-grow：放大比例。默认0。即存在剩余空间也不放大

flex-shrink：缩小比例。默认1。即空间不足，项目将缩小

flex-basis：定义在分配多余空间之前，项目占据的主轴空间。默认auto

flex：flex-grow，flex-shrink和flex-basis的简写。默认0 1 auto

align-self：允许单个项目与其他项目不一样的对齐方式。可覆盖align-items属性。默认auto，表继承父元素的align-items属性，否则为stretch