垂直对齐 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>