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