CSS Flexbox中flex-direction: row与column的区别（新手解惑）

先给你掰明白最基础的：Flexbox本质就是给一个容器（比如一个div）设置display: flex后，里面的子元素就会跟着flex-direction的规则来排列。row和column就是最常用的两个排列方向选项，区别特别直观：

1. flex-direction: row（默认值） #

• 排列方式：子元素从左到右横着排，就像你在桌面上从左到右摆手机、耳机、充电器一样。
• 主轴方向：此时容器的「主轴」是水平方向（左右），所有子元素会沿着这条主轴依次排列。如果子元素总宽度超过容器，没开flex-wrap: wrap的话就会挤在一起缩小，开了就会换行到下一行（还是横着排）。
• 默认对齐：子元素会自动占满容器的高度（因为默认align-items: stretch），宽度则看自身内容或者你设置的flex属性分配。

2. flex-direction: column #

• 排列方式：子元素从上到下竖着排，就像你在书架上从顶层往下摆一本本书一样。
• 主轴方向：此时容器的「主轴」变成垂直方向（上下），所有子元素沿着这条垂直主轴依次排列。如果子元素总高度超过容器，开了flex-wrap: wrap就会换到右侧继续竖着排，没开就会挤在一起缩小。
• 默认对齐：子元素会自动占满容器的宽度（默认align-items: stretch），高度则看自身内容或者flex属性分配。

简单代码示例 #

/* 横向排列的容器 */
.row-box {
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 100px;
  border: 1px solid #ddd;
}

/* 纵向排列的容器 */
.column-box {
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 300px;
  border: 1px solid #ddd;
}

/* 子元素样式 */
.box-item {
  width: 50px;
  height: 50px;
  background: #42b983;
  margin: 5px;
}

你可以把这段代码复制到浏览器里试一下，看两种排列的直观差异——row里的方块左右排，column里的方块上下叠，一眼就能懂。

内容的提问来源于stack exchange，提问作者Mutiat