垂直对齐内容

Question

希望这不是一个未解决的任务，但我正在尝试垂直证明容器内未知（ish）数量的 div。

每个 div 彼此之间的距离应该相等，此外，与边缘的距离也应该相同。 （假设最后一部分可以使用之前和之后的幽灵元素来完成）

每个div都会填满容器的宽度，容器是一个设定的高度，但是容器里面的元素数量是未知的。

我假设它可以在某种程度上使用 Flexbox 来完成，但到目前为止我的尝试都没有成功。

原文由 Rockster160 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

像往常一样，无论我搜索多久，我都是在提出问题后立即找到答案。 :D

对于那些好奇的人，或者为了我自己未来的参考：Flexbox 的 justify 确实有效，你只需要更多的选择：

HTML:

 <div id="outer-container">
  <div class="inner-element"></div>
  <div class="inner-element"></div>
  <div class="inner-element"></div>
  <div class="inner-element"></div>
  <div class="inner-element"></div>
  <div class="inner-element"></div>
  <div class="inner-element"></div>
</div>

CSS：

 #outer-container {
  height: 250px;
  width: 200px;
  background: red;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}

.inner-element {
  width: 200px;
  height: 10px;
  background: blue;
}

https://css-tricks.com/almanac/properties/j/justify-content/

https://jsfiddle.net/WW3bh/

原文由 Rockster160 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

是的，flexbox 是最简单的方法。

在容器元素上：

 .container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

在子元素上：

 .container div {
  flex: 1;
  width: 100%
}

对于元素之间的间距，只需为容器添加填充，为子项添加底部边距。

样式看起来像这样：

 .container {
  /* Same as above, and */
  padding: 20px;
}

.container div {
  /* Same as above, and */
  margin-bottom: 20px;
}

.container div:last-of-type{
  margin-bottom: 0;
  /* So that spacing is even at bottom and top of container */
}

（当你发布你的答案时我正在输入这个，所以我还是把它放了）

小提琴

原文由 user5347910 发布，翻译遵循 CC BY-SA 3.0 许可协议