垂直对齐内容答案

【问题标题】：Vertically justify content垂直对齐内容
【发布时间】：2016-10-19 21:58:52
【问题描述】：

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

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

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

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

【问题讨论】：

@Lowkase，我尝试了各种不同的解决方案，但主要问题是我不知道如何开始。
有几种可能性：justify-content: space-around / space-between、auto 边距，甚至是弹性容器上的pseudo-elements。所有内容都在这里：*.com/a/33856609/3597276

标签： html css sass flexbox

【解决方案1】：

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

对于那些好奇的人，或者我自己未来的参考：Flexbox 的 justify DOES 工作，你只需要更多的选择：

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/

【讨论】：

【解决方案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 */
}

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

Fiddle

【讨论】：

【解决方案3】：

我使用justify-content:space-evenly。

HTML：

div.container {
  display: flex;
}

div.one_item_container {

  display: flex;
  flex-direction: column;            
  justify-content: space-evenly;
  
}

<div class="container">
  <div class="one_item_container">
    <img height="30" src="hello.jpeg" style="background-color:lightblue;" />
  </div>
  <div class="one_item_container">
    <img height="50" src="hello2.jpeg" style="background-color:lightblue;" />
  </div>
  <div class="one_item_container">
    <img height="40" src="hello2.jpeg" style="background-color:lightblue;" />
  </div>
</div>

【讨论】：