html - 垂直内容适合 div

Question

我想知道自动让内容垂直适合容器的最佳方式(最好使用 CSS，但欢迎提出其他建议)。因此，例如，类似于在 div 内的元素(在我的例子中，<img> 后跟各种文本标签)之间具有相等的顶部/底部间距(填充/边距)。目标是内容优雅地拉伸(stretch)以适合容器。

我一直在四处寻找，但没有找到合适的解决方案，也没有找到任何最近关于此的问题(尽管我承认我本可以更仔细地寻找)。谢谢

根据 Louie Almeda 的建议，这里有一个例子:

Answer 1

我(和很多其他人)会提倡 flexbox。仔细阅读 here .

不幸的是，flexbox 目前没有办法均匀分布它的 child 。 space-between 尽可能将它们隔开，space-around 尽可能少地隔开它们。

同样有效的方法是给 child flex-grow: 1，同时让 child 成为 flexbox，然后将其中的内容居中对齐。

<div id="container">
  <div class="cell">
    <div class="stuff">
      <h3>asdf</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
  </div>
  <div class="cell">
    <div class="stuff">
      <h3>asdf</h3>
    </div>
  </div>
  <div class="cell">
    <div class="stuff">
      <h3>asdf</h3>
    </div>
  </div>
</div>

#container {
  background: red;
  display: flex;
  flex-direction: column;
  height: 500px;
}

.cell {
  margin: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stuff {
  background: green;
}

https://jsfiddle.net/w8s4zazk/