html - flexbox 四 block 布局

Question

我想创建一个基于 flexbox 的 2x2 布局，其中包含四个相等的图 block 。这是一把 fiddle https://jsfiddle.net/1Lw5hge3/2/ .最初的 1x2 水平分割效果很好，我设置了

.half
{
     flex: 0 0 50%;
}

据我了解，这等于“不增大或缩小，只需将其设置为 50%”。它工作正常，即使其中一个图 block 没有内容。

然而，当我对嵌套的 quarter 磁贴尝试相同的方法时，它不起作用。每个图 block 的内容不同，可以是背景图片，也可以是一些可变高度的文字。当 flex-grow 设置为 0 时，图 block 根本不会扩展到全高，只是内容高度。当我将它设置为 1 时，它们会扩展，但比例不是 50%，它们是基于内容的(例如带有小引号和图像的图 block ，显然图像图 block 没有初始高度，因此带有引号的图 block 更高)。

有没有办法为 quarter block 正确设置高度，而不考虑内容？我不确定 half 是如何工作的，也许 container 中的某些东西修复了它？

Answer 1

将 flex-basis 设置为 0 而不是 50% 并将 flex-grow 设置为 1 解决了这个问题

.quarter
{
    flex: 1 0 0;
}