css - 在没有固定高度的父项中控制 Flex 子项的比率

Question

我希望获得与此处解释的结果类似的结果。我在下面包含了确切的代码段：

flex: 1 1 0;

在这里，我们说项目的大小用于计算空间分配的目的是 0——所有空间都可供抓取，并且由于所有项目都具有相同的 flex-grow 因子，它们每个都获得相同数量的空间分散式。最终结果是三个等宽、灵活的物品。

我将使用一列垂直子代与一排水平子代一起工作，但工作不应该有所不同。

我的问题是，在上面的示例中，已设置显式宽度（在我的情况下为高度），但我无法做到。我希望创建四个大小相同的宿舍，而不管每个宿舍包含的内容如何。

简而言之 - 有没有办法在没有明确高度的父级内部拥有相同高度的子 div，具有不同的内容？

非常感谢任何帮助！

标签： cssflexbox

Answer 1

经过大量测试后，我意识到为此使用 flexbox 是无法实现的（至少很容易）。然而，使用 CSS Grid 非常简单。对于任何对该解决方案感兴趣的人，只需将每个“模块”的值设为 1fr 即可。