flex弹性布局

必须有

display:flex;

有6个属性设置在容器上

flex-direction //排列方向
水平排列
row row-reverse
垂直排列
column column-reverse
flex-wrap //换不换行
默认不换行：nowrap ，
换行： wrap ,
换行，第一行在下方: wrap-reveerse

flex-flow
//前两个的结合
排列方向 换不换行
默认：row wrap

justify-content //主轴对齐方向
flex-start（默认值）：左对齐
flex-end 右对齐
center 居中
space-between 两端对齐
space-around 拉手
align-items //交叉轴上对齐
flex-start 上
flex-end 下
center 居中
stretch 占满整个容器的高度（默认值）
baseline 第一行文字的基线对齐
align-content //多根轴线的对齐
flex-start
flex-end
center
stretch（默认值）
space-between
space-around

有6个属性设置在项目上

order 排列顺序。数值越小，排列越靠前，默认为0。
flex-grow 放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink 缩小比例，默认为1
flex-basis 它的默认值为auto，即项目的本来大小。当有额外的空间的时候用
content –> width –> flex-basis (limted by max|min-width)

flex 前三个结合 一般使用这个 ， 后两个属性可选 默认值为0 1 auto，
align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
align-self: auto | flex-start | flex-end | center | baseline | stretch;