flex布局

flex容器属性

flex-direction 主轴方向 row | row-reverse | column | column-reverse
flex-wrap 主轴换行 wrap | nowrap | wrap-reverse
flex-flow 是direction和wrap的合写
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

flex项目属性

order 排列顺序，数值越小，排列越靠前，默认0
flex-grow 项目的放大比例，默认0
flex-shrink 项目的缩小比例 默认1
felx-basis 项目占据的主轴空间，默认auto
flex 是grow、shrink、basis的简写， 默认0 1 auto
align-self 单个项目与其他项目不一样的对齐方式