内容适合div垂直

Question

我想知道自动让内容垂直适合容器的最佳方式（最好使用CSS，但欢迎其他建议）。因此，例如，类似于div中的项目（在我的情况下，<img>后跟各种文本标记）之间具有相等的顶部/底部间距（填充/边距）。目标是内容优雅地伸展以适应容器。

我一直在四处寻找，但没有找到合适的解决方案，或者最近有任何关于此的问题（尽管我承认我看起来更难）。感谢

Per Louie Almeda的建议，这里有一个例子：

Answer 1

我（以及许多其他人）会提倡使用flexbox。阅读here。

不幸的是，flexbox目前无法均匀地分配其子节点。 space-between尽可能地将它们隔开，space-around尽可能地将它们隔开。

同样有效的方法是给孩子们flex-grow: 1，同时让孩子们使用柔性盒，然后将这些中心对齐。

<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/

Answer 2

这是一个css flexbox解决方案：

HTML

<div class="Aligner">
  <div class="Aligner-item image-wrapper">inner1</div>
  <div class="Aligner-item text-wrapper">inner2</div>
  <div class="Aligner-item text-wrapper">inner3</div>
</div>

CSS

.Aligner {
  flex-direction: column;
  display: flex;
  height: 500px;
  align-items: center;
  justify-content: space-around;
}


.Aligner-item {
  display: flex;
  border: 1px solid #333;
  width: 300px;
  justify-content: center;
  align-items: center;
}

.image-wrapper{
  height: 200px;
}

.text-wrapper{
  height: 100px;
}

Answer 3

如果使用网格，则使用空间均匀与周围空间和空间略有不同。我更喜欢空间。