CSS Flexbox 布局：flex-direction 属性详解

前端开发中，灵活的布局方式是十分重要的一环。而 CSS 的 Flexbox 布局，正是一种优秀的解决方案。其中，flex-direction 属性就是最重要的一环。本文就将详细介绍这个属性的不同取值以及使用方法。

flex-direction 属性概述

首先，需要了解的是，flex-direction 属性用来设置容器中 flex items（即可替换盒模型元素）的排列方式。取值包括以下四种：

• row：items 按照主轴水平排列，起点在左端（默认值）。
• row-reverse：items 按照主轴水平排列，起点在右端。
• column：items 按照主轴垂直排列，起点在上端。
• column-reverse：items 按照主轴垂直排列，起点在下端。

这些取值，都是相对于主轴而言的。如果设置为 row 或 row-reverse，则将 items 横向排列；如果设置为 column 或 column-reverse，则将 items 竖向排列。

主轴与交叉轴

在 flex 布局中，主轴与交叉轴是十分重要的概念。通过了解它们的定义以及联系，可以更好地理解 flex-direction 属性的作用。

在默认情况下，主轴是水平方向的，交叉轴是垂直方向的：

当 flex-direction 设置为 row-reverse 的时候，主轴方向右转，起点在右端：

同理，当属性设置为 column 或 column-reverse 的时候，交叉轴方向变为水平方向，主轴方向变为垂直方向：

flex-direction 实例解析

下面提供一些实际例子，帮助更好地理解 flex-direction 属性的应用方法。

实例 1：row

首先来看最基本的 row 取值：

.container {
  display: flex;
  flex-direction: row;
}

上述代码，设置了一个容器为 flex 容器，并且 flex-direction 属性为 row。这将使得容器内部元素按照水平方向排列：

此时，容器底部有一个与内容宽度等同的空白区域，是因为最后一个元素没有填满容器的宽度所导致的。可以通过在容器中添加 justify-content 属性来解决这个问题：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

实例 2：row-reverse

接下来，尝试一下 row-reverse 取值：

.container {
  display: flex;
  flex-direction: row-reverse;
}

容器内部内容将从右往左排列：

实例 3：column

再来看看 column 取值：

.container {
  display: flex;
  flex-direction: column;
}

此时，容器内的元素按照从上到下的方向排列：

实例 4：column-reverse

最后，看一下 column-reverse 取值：

.container {
  display: flex;
  flex-direction: column-reverse;
}

此时，容器内的元素按照从下到上的方向排列：

总结

以上就是 flex-direction 属性的详细介绍，以及实例代码演示。在实际开发中，根据实际需求灵活使用，可以达到更好地布局效果。希望本文能够对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f4750ecd706fa186b25ef