flexbox 四块布局

Question

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

.half
{
     flex: 0 0 50%;
}

据我所知，等于 'do not grow or shrink, just set it to 50%'。它工作正常，即使其中一个图块没有内容。

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

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

Answer 1

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

.quarter
{
    flex: 1 0 0;
}

flexbox 四块布局

flexbox four tile layout

html

css

flexbox

tile