【HTML+CSS】 Flex布局下主轴侧轴的方向切换以及弹性盒子换行

目录

主侧轴的切换

 弹性盒子换行

---

主侧轴的切换

首先打开flex布局

display:flex;

默认状态下主轴为水平方向 延X轴正方向排列

flex-direction:row;

修改为垂直方向 延Y轴正方向排列

flex-direction:column;

此时侧轴会更改为水平方向(x轴方向）

若要主轴改变排列方向 则在后面加上 -reverse

flex-direction: row-reverse;
flex-direction: column-reverse;

 弹性盒子换行

弹性盒子特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

弹性盒子换行显示

 flex-wrap: wrap;

前后效果图

 

 就是这样 差不多得啦