html - 垂直均匀分布列表项

Question

我正在尝试使用 CSS 找到一种在垂直方向上均匀分布列表项的方法。

我希望每个列表项都有一个固定的高度，不会改变。我希望每个列表项之间的边距自动拉伸(stretch)，因此它具有相同的空间量但 margin:auto;不工作。

这是片段:

.container {
  border: 1px solid black;
  height: 500px;
  width: 400px;
}

.spaced {
  padding: 0;
  list-style: none;
}
.spaced li {
  border: 1px solid blue;
  height: 60px;
  margin: 15px;
}

<div class="container">
  <ul class="spaced">
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
  </ul>
</div>

所以对于这个片段，我需要它，这样蓝色框将保持相同的高度并且在垂直方向上均匀分布。如果黑框的高度发生变化，那么蓝框仍将均匀分布。

我该怎么做？

Answer 1

您可以使用 Flexbox 和 justify-content: space-around; 来做到这一点

Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.

.container {
  border: 1px solid black;
  height: 500px;
  width: 400px;
  padding: 10px;
  box-sizing: border-box;
}

.spaced {
  height: 100%;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 0;
}
.spaced li {
  border: 1px solid blue;
  height: 60px;
}

<div class="container">
  <ul class="spaced">
    <li>item </li>
    <li>item </li>
    <li>item </li>
    <li>item </li>
  </ul>
</div>