首先在父元素上设置弹性盒子的关键属性
display:flex;
弹性盒子有主轴和交叉轴
1.设置主轴的方向
flex-direction:row; 默认值 主轴从左到右 左对齐方式
flex-direction:row-reverse 从右到左 右对齐方式
flex-dirextion:column 主轴从下到上 在垂直方向倒序
2.设置子项是否换行
默认值 no-wrap 当子项的宽度总和超过父容器的宽度时，子项会压缩
wrap 会换行
flex-wrap:wrap;
3.设置在主轴上的对齐方式
justify-content:flex-start 默认值 从主轴开始的方向排序
justify-content:flex-end 从主轴结束的方向开始排序
justify-content:center 在主轴上自动居中
justify-content:space-between 在主轴上 平均分布
justify-content:space-around 在主轴上 分布 两端的子项距离父边框的距离相等 = 子项之间的距离相等 / 2
4.针对单行的对齐方式
align-items:stretch; 默认值
align-items:flex-start 交叉轴的开始端排列
align-items:flex-end 交叉轴的底端排序
align-items:center 在交叉轴上居中
align-items:baseline 保证子项的文本基线统一
5.作用在多行
align-content:stretch 默认值 拉升交叉轴上的空白区域
align-content:flex-start 交叉轴的开始端排列
align-content:flex-end 交叉轴的底端排序
align-content:center 在交叉轴上居中
align-content:baseline 保证子项的文本基线统一
flex设置项的弹性
flex-grow 默认值0 土地扩张
当这一行主轴方向有剩余的空间，按照设置的比例，分配剩余空间
如果值是0；则不参与瓜分
flex-basis width几乎同等效果
权重比width高
flex-shrink 默认值是1 土地缩水
项的具体宽度*shrink占权重总数的比例*溢出的宽度 = 实际压缩的数据
如果不参与压缩，值设置为0