CSS Flexbox 中的 flex-direction 属性详解

在 CSS Flexbox 中，flex-direction 属性是用来设置 flex 容器中主轴的方向的。它有四个可选值：row、row-reverse、column 和 column-reverse。

row 和 row-reverse

row 是默认值，它使得 flex 容器的主轴与文本方向相同，即从左到右排列。而 row-reverse 则将主轴方向反转，即从右到左排列。

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-direction: row;
}

.item {
  padding: 10px;
  background-color: #eee;
}

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-direction: row-reverse;
}

.item {
  padding: 10px;
  background-color: #eee;
}

column 和 column-reverse

column 将主轴方向变成从上到下，即垂直排列。而 column-reverse 则将主轴方向反转，即从下到上排列。

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-direction: column;
}

.item {
  padding: 10px;
  background-color: #eee;
}

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-direction: column-reverse;
}

.item {
  padding: 10px;
  background-color: #eee;
}

总结

flex-direction 属性非常有用，可以轻松地控制 flex 容器的主轴方向。在实际开发中，我们可以使用它来实现不同的布局效果，比如水平居中、垂直居中、左右布局、上下布局等等。

当然，flex-direction 只是 CSS Flexbox 的一部分，要想真正掌握 Flexbox 布局，还需要学习其他相关属性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656ea7a0d2f5e1655d6dd7e9