垂直对齐具有相等间距的div元素

Question

我正在尝试使用CSS实现这个简单的概念，但是我已经搜索了整个互联网却找不到任何东西。我想我只是没有正确表达，所以我尝试用一个视觉图像来说明我的意思：

顶部的方框应该位于顶部，底部的方框应该位于底部。然后它们之间的方框应该在顶部和底部有相等的间距。这更像是这个答案的垂直版本: https://dev59.com/sGw15IYBdhLWcg3wCnUn#6880421

- Olanrewaju Lax Lawal

---

容器大小固定吗？为什么不使用边距？ - paolobasso

请提供一个 [mcve]。 - user5306470

@paolo.basso99无法使用边距，因为我需要动态计算间距，并且在添加更多框时应该无缝工作。 - Olanrewaju Lax Lawal

Answer 1

你可以使用 Flexbox 实现此目的。只需设置 flex-direction: column 和 justify-content: space-between 即可。

body,
html {
  margin: 0;
  padding: 0;
}
.content {
  display: flex;
  height: 250px;
  border: 1px solid black;
  justify-content: space-between;
  flex-direction: column;
  width: 200px;
}
.box {
  background: #0479D9;
  height: 50px;
}

<div class="content">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

- Nenad Vracar

---

太棒了。我遇到过弹性盒子，但懒得去阅读和理解它的工作原理。 - Olanrewaju Lax Lawal

Answer 2

您也可以使用网格CSS布局来实现此目的：

.content {
  display: grid;
  align-content: space-between;
  height: 275px;
  border: 1px solid black;
  width: 200px;
}
.box {
  background: #0479D9;
  height: 75px;
}

<div class="content">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

- Darryl RN