html - 垂直均匀地间隔列表项

我正在尝试使用 CSS 找到一种方法来垂直均匀地间隔列表项。

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

这是片段:

.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>

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

我怎样才能做到这一点？

最佳答案

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

.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>

关于html - 垂直均匀地间隔列表项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34841488/