flex-direction

`flex-direction` 是 CSS 的一个属性，用于指定弹性盒子的主轴方向。弹性盒子是 CSS3 引入的一种布局方式，可以在不使用浮动或定位的情况下，实现灵活的盒子布局。`flex-direction` 可以设置以下四个值：

- `row`：默认值，主轴为水平方向，起点在左端。
- `row-reverse`：主轴为水平方向，起点在右端。
- `column`：主轴为垂直方向，起点在上部。
- `column-reverse`：主轴为垂直方向，起点在下部。

示例代码：

.container {
  display: flex;
  flex-direction: row; /* 水平方向，从左到右排列 */
}

.container-reverse {
  display: flex;
  flex-direction: row-reverse; /* 水平方向，从右到左排列 */
}

.container-column {
  display: flex;
  flex-direction: column; /* 垂直方向，从上到下排列 */
}

.container-column-reverse {
  display: flex;
  flex-direction: column-reverse; /* 垂直方向，从下到上排列 */
}

相关问题

flex-direction取消

在 CSS 中，`flex-direction` 是用于设置弹性容器中子项的排列方向的属性。默认情况下，`flex-direction` 的值为 `row`，表示子项从左到右水平排列。

如果要取消 `flex-direction` 的效果，可以将其值设置为 `initial` 或者 `unset`。通过将 `flex-direction` 设置为 `initial`，可以将其重置为默认值 `row`。而将其设置为 `unset`，则会将属性的值重置为继承值（如果有的话），否则重置为初始值。

以下是一个示例，展示如何取消 `flex-direction` 的效果：

.flex-container {
  flex-direction: unset;
}

这样设置后，容器中的子项将采用默认的水平排列方式。