html - 使用 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; 就可以了。