主轴与侧轴

在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有∶行和列、x轴和y轴

  • 默认主轴方向就是x轴方向,水平向右
  • 默认侧轴方向就是y轴方向,水平向下

image.png

属性值

flex-direction属性决定主轴的方向(即项目的排列方向)
注意∶主轴和侧轴是会变化的,就看flex-direction设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

属性值 说明
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上