使用 Flexbox 对齐高度

Question

我使用http://demo.agektmr.com/flexbox/ 作为参考，配置如下：

<div class="box">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
</div>

.box {
    display: flex;
    flex-flow: row nowrap ;
    justify-content: space-around;
    align-content: space-between;
    align-items: center;
}

然后我为每个盒子设置不同的高度。它们在中间垂直对齐，但保持设定的高度。

如何使用 flexbox 使盒子具有灵活的高度，并且它们都适合最大的盒子？

一个实际的例子是一个带有 2 个侧边栏和一个内容列的基本网站，它们具有动态内容并且都应该具有相同的高度。

Answer 1

根据this article，将align-items: center; 更改为align-items: stretch; 即可。