弹性盒子(flex) 改变主轴和强制换行

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;