主轴的方向的设置
默认情况,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
在这里插入代码片