弹性盒模型

主轴的方向的设置
默认情况，x轴从左到右
column（y轴从上到下）
column-revrese(y轴从下到上)
row:默认值
row-reverse,x轴从右到左

主轴方向的对其方式;
justify-content:
flex-end 主轴结束方向对齐；
center主轴居中
工作原理；
stepl;获取剩余空间  300
steo2:获取项目的个数  5
step3:获取剩余空间/项目的个数的结果
step4:吧step3的结果除以2
step5:把step4的结果，分配给每个项目左右;


space-between:主轴两端对齐；
space-around:主轴分散对齐;

space-evenly:主轴平均分配;

取值：
flex-start顶端对齐
flex-end;交叉轴结束对齐
center；交叉轴居中；
baseline:基础对齐
atretch；如果项目没有给高{高就为容器的高}；


换行
条件1，所有项目尺寸之和要大于容器的尺寸,
条件2：所有项目宽度之和要大于容器的尺寸,

flex-wrap: nowrap(默认)
flex-wrap:wrap  换行
换行为剩余空间
flex-wrap: wrap-reverse;换行倒叙



多跟轴线对齐方式;
align-content: flex-start; 所有轴线交叉轴顶部对齐
align-content: flex-end;   所有轴线交叉轴底部对齐；
align-content: center;     所有轴线交叉轴居中；


 align-content: space-around;    交叉轴两端对钱；
 align-content: space-between;   交叉轴分散对齐；
 align-content: space-evenly;    交叉轴平均分配


容器的宽度-所有项目的宽度=剩余空间

主轴起始和换行的简写方式
flex-flow:主轴起始，是否换行
flex-flow:column  wrap

在这里插入代码片