flex-direction: 从上到下

flex-direction属性用于指定flex容器中flex项目的排列方向。当设置为"column"时，flex项目会从上到下依次排列。

具体来说，当flex-direction设置为"column"时，flex项目会按照以下方式排列：
1. 项目会从上到下依次排列，即第一个项目位于容器的顶部，最后一个项目位于容器的底部。
2. 项目的主轴方向是垂直方向，即项目的宽度会被拉伸以填满容器的宽度。
3. 项目的交叉轴方向是水平方向，即项目的高度默认根据内容自适应，也可以通过设置align-items属性来调整项目在交叉轴上的对齐方式。

示例代码如下：

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

相关问题

flex-direction: row-reverse;和flex-direction: row;

flex-direction: row-reverse;和flex-direction: row;是CSS中用于控制flex容器中子元素排列方向的属性。

1. flex-direction: row-reverse;表示子元素按照水平方向从右到左排列。这意味着子元素会从容器的最右边开始排列，依次向左排列。这个属性可以用于创建从右到左的布局。

2. flex-direction: row;表示子元素按照水平方向从左到右排列。这是默认的排列方式，子元素会从容器的最左边开始排列，依次向右排列。

下面是两个例子来演示这两个属性的使用：

1. flex-direction: row-reverse;

<div style="display: flex; flex-direction: row-reverse;">
  <div style="width: 100px; height: 100px; background-color: red;"></div>
  <div style="width: 100px; height: 100px; background-color: blue;"></div>
  <div style="width: 100px; height: 100px; background-color: green;"></div>
</div>

这个例子中，三个子元素会从右到左排列，最右边的红色方块会排在最左边。

2. flex-direction: row;

<div style="display: flex; flex-direction: row;">
  <div style="width: 100px; height: 100px; background-color: red;"></div>
  <div style="width: 100px; height: 100px; background-color: blue;"></div>
  <div style="width: 100px; height: 100px; background-color: green;"></div>
</div>

这个例子中，三个子元素会从左到右排列，最左边的红色方块会排在最左边。

flex-end：和flex-direction: row-reverse;解释

flex-end属性用于设置子元素在主轴上的对齐方式，使其靠近主轴的结束位置。而flex-direction: row-reverse;属性用于设置主轴的方向为从右到左。

举个例子，假设有一个父容器，其中包含三个子元素。当设置flex-direction: row-reverse;时，子元素会从右到左排列。而当设置flex-end时，子元素会靠近主轴的结束位置。

下面是一个示例代码：

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

.item {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
}

在上述代码中，父容器的flex-direction属性设置为row-reverse，子元素会从右到左排列。而justify-content属性设置为flex-end，子元素会靠近主轴的结束位置。