display: flex从上到下

以下是使用display:flex实现从上到下排列的例子：

<div style="display:flex; flex-direction:column;">
  <div>第一行</div>
  <div>第二行</div>
  <div>第三行</div>
</div>

这里使用了flex-direction属性，将其设置为column，表示从上到下排列。同时，由于display:flex默认是横向排列，因此需要将其设置为纵向排列。

相关问题

display：flex 上下 距离

设置display:flex的容器的flex-direction属性为column可以实现上下布局，即flex容器的子元素会垂直排列。具体代码如下：

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

这样设置之后，flex容器的子元素会按照从上到下的顺序排列，并且会自动适应容器的高度。这样可以实现上下之间的距离。

.control-bar { background-color: #f2f2f2; padding: 10px; display: flex; justify-content: flex-end; }，其中display: flex和 justify-content: flex-end是什么意思

在这段代码中，`.control-bar` 是一个 CSS 类，用于样式化一个控制栏的元素。以下是对 `display: flex` 和 `justify-content: flex-end` 的解释：

`display: flex` 是一个用于 CSS 布局的属性。它将元素的显示方式设置为弹性盒子布局（flexbox）。当一个容器元素设置了 `display: flex`，其子元素会按照弹性盒子模型进行布局。子元素可以通过设置 `flex` 属性来控制它们在容器中的大小和位置。

`justify-content: flex-end` 是一个用于弹性盒子布局的属性，它指定了弹性容器中子元素在主轴上的对齐方式。在这里，`flex-end` 将子元素放置在弹性容器的末尾。换句话说，它会将子元素靠近弹性容器的右侧（如果主轴是水平方向）或底部（如果主轴是垂直方向）。

在这段代码中，`.control-bar` 的作用是创建一个控制栏，背景颜色为 `#f2f2f2`，并且有一个 `10px` 的内边距。通过设置 `display: flex`，它使得控制栏中的子元素能够按照弹性盒子布局进行排列。而 `justify-content: flex-end` 则将控制栏中的子元素靠近控制栏的右侧。这样就可以将控件或按钮放置在控制栏的右侧。