display:flex 纵向沾满

要将一个元素的子元素垂直方向上沾满，可以使用CSS的flexbox布局。

首先，设置父元素的display属性为flex，这将使父元素成为一个flex容器。然后，添加flex-direction属性并将其值设置为column，以使子元素在垂直方向上排列。

接下来，可以使用flex属性来控制子元素的占比。将子元素的flex属性设置为1，表示子元素将会占据剩余的空间。

以下是一个示例的HTML和CSS代码：

HTML代码：

<div class="container">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

CSS代码：

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

.child {
  flex: 1;
}

在上面的示例中，父元素具有class为"container"，子元素具有class为"child"。通过将父元素的display属性设置为flex，子元素将会在垂直方向上排列，并且通过设置子元素的flex属性为1，实现了子元素在垂直方向上沾满父元素的效果。

相关问题

display: flex; flex-direction: column;

这段代码使用了CSS的flex布局，它的作用是将父容器内的子元素按照竖直方向（从上到下）排列。简单来说，它使得父容器内的子元素成为一个纵向的列表。具体的解析如下：

- display: flex;：将父容器设置为flex容器，实现弹性布局。
- flex-direction: column;：将子元素按照竖直方向排列，从上到下。

这段代码适用于需要将子元素垂直排列的布局场景。

display: flex;的作用

display: flex; 是 CSS3 中的一种布局方式，它的作用是将一个元素设置为弹性盒子（flexbox），使其能够更加高效地布局其子元素。

使用 display: flex; 的元素被称为 flex container，它的子元素被称为 flex items。通过设置 flex container 的属性，可以实现以下效果：

- 横向或纵向排列 flex items
- 拉伸或收缩 flex items 的大小
- 对 flex items 进行对齐

具体来说，常用的 flex container 属性有：

- flex-direction：设置 flex items 的排列方向，可选值为 row（横向，默认）、row-reverse（横向反向）、column（纵向）和 column-reverse（纵向反向）
- justify-content：设置 flex items 在主轴上的对齐方式，可选值为 flex-start（开始）、flex-end（结束）、center（居中）、space-between（两端对齐）和 space-around（平均分布）
- align-items：设置 flex items 在交叉轴上的对齐方式，可选值为 flex-start（开始）、flex-end（结束）、center（居中）、baseline（基线对齐）和 stretch（拉伸）

除此之外，还有一些常用的 flex item 属性，如 flex-grow（放大比例）、flex-shrink（缩小比例）和 flex-basis（基础大小）。通过设置这些属性，可以更加精细地控制 flex items 的大小和排列方式。