flex

父级

//改变盒子模型
display:flex
//排列方向左右row；上下column；
flex-direction:row、column、row-reverse、column-reverse 
//是否换行显示默认：nowrap
flex-warp：nowrap、wrap、wrap-reverse
//两个合并写法（推荐）
flex-flow：<flex-direction>|<flex-wrap>
//主轴的对齐方式（常用）有5个属性分成了两行
justify-content：flex-start、flex-end、center、
justify-content：space-between(两端对齐，两两间隔相等）、space-around（每个子集有相等的左右边距）
//另一个方向的对齐方式。和flex-direction相反
align-item：conter、flex-start、flex-end
//多跟轴线的对齐方式
align-centent：flex-start | flex-end | center | space-between | space-around | stretch(默认);

子集

//越小越靠前
order：整数
//放大比例
flex-grow：number
//缩小比例
flex-shrink：number
//放大缩小的基础值
fles-basis：100px；
//三个合集（推荐）最少填写一个
flex：放大、缩小、基础值；
//单独设置对齐方式
align-self：auto | flex-start | flex-end | center | baseline | stretch;