1.改变主抽
flex默认的主轴是水平方向上的x轴;侧抽为垂直方向上的y轴.
.box{
display: flex;
flex-direction: row;
}
默认方向值为 row
主轴为水平方向 flex-direction: row;
水平反方向排列盒子 flex-direction: row-reverse;
主轴为垂直方向 flex-direction: column;
垂直反方向排列盒子 flex-direction: column-reverse;
主轴对齐居中 justify-content: center;
侧轴对齐居中 align-items: center;
2.flex(弹性盒子)强制换行
flex-wrap: wrap;
主轴两边靠边,中间自适应 justify-content: space-between;
侧轴两边靠边,中间自适应 align-content: space-between;
侧轴从第一个开始排列 align-content: flex-start;
侧轴从最后一个开始排列 align-content: flex-end;
多行侧轴垂直排列 ,中间对齐 align-content: center;
多行侧轴垂直排列 ,中间按照1比2划分 align-content: space-around;
多行侧轴垂直排列 ,中间按照1比1划分 align-content: space-evenly;