flex:
开启: display:flex;
容器:
justify-content:center横轴方向居中对其; flex-end 靠右对齐; space-between 左右两端对齐且项目间距相等;
space-around 项目间距是左右两端项目到容器距离的二倍 ; space-evenly 项目间距与容器距离相等;
align-items:flex-start 默认; center 交叉轴居中排列;flex-end 靠着交叉轴底部对齐
flex-direction:row 默认按行分布;row-reverse; 行分布反转 column 按列分布; column-reverse 列分布反转;
flex-wrap nowrap 默认 当项目总宽度大于容器宽度时项目会强行等分容器且不换行
warp 项目会根据自身宽度进行排列,超出自然换行
项目:order 数值越小项目排列越靠前
align-self:conter 单独居中排列 flex-end 靠底端对齐
flex-grow:0 项目有剩余空间时默认不放大 0 0 1 最后的项目占满剩余空间 ;0 1 1 后两个项目平分剩余空间
flex-shrink:1 默认1空间不足时大家一起等比缩小; 0 不缩小
flex-basis :auto 项目保持默认宽度,或者以width为自身宽度,但如果设置了flex-basis:宽度 权重比width属性高,覆盖width属性
flex :0 1 auto 默认; auto(1 1 auto)等分放大缩小 none(0 0 auto)不放大,但等分缩小