如何垂直分布 CSS 中的项目

在 CSS 中，想要垂直分布元素并不是一件容易的事情。本文将介绍几种方法来实现垂直分布 CSS 中的项目。

1. 使用 flexbox

使用 flexbox 是一种简单的实现垂直分布元素的方法。可以使用 align-items: center 或 align-items: stretch 属性来实现此功能，具体取决于您的需求。

示例代码

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  /* align-items: stretch; /* 自动拉伸 */
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

解释

使用 display: flex 属性将 .container 元素设置为 flex container。在此示例中，所有三个 .item 元素（子元素）将在 .container 元素中垂直对齐。

如果您想要所有项平均分配空间，则可以在 .container 中使用 justify-content: space-between 属性，如下所示：

.container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 平均分配空间 */
}

2. 使用 transform

也可以使用 transform 属性来实现垂直分布元素。使用 translateY 函数可以将元素垂直移动，并在中心处对齐。

示例代码

.container {
  position: relative;
}

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

解释

在上面的示例中，我们首先将 .container 元素设置为 position: relative。接下来，我们使用 position: absolute 将三个 .item 元素相对于 .container 元素定位。

然后，我们使用 top: 50% 属性将元素垂直居中。最后，使用 transform: translateY(-50%) 函数将元素向上移动到它们的中心位置。

3. 使用 table

使用 table 和 table-cell 是另一种实现垂直分布元素的方法。在 .container 元素中使用 display: table 属性，在 .item 元素中使用 display: table-cell 和 vertical-align: middle 属性。

示例代码

.container {
  display: table;
}

.item {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

解释

在此示例中，我们首先将 .container 元素设置为 display: table，将它视为一个表格元素。然后，我们使用 display: table-cell 将每个 .item 元素视为表格单元格。

使用 vertical-align: middle 属性将 .item 元素垂直居中。

这些都是实现垂直分布元素的常见方法，您可以根据自己的需求选择其中任何一种方法来实现。