垂直对齐div，它们之间的空间相等

Question

所以我努力用CSS实现这个简单的概念，我也搜索了整个互联网但却找不到任何东西。我想我只是没有正确写字，所以我想要做的是这样的视觉形象：

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

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>

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>