没有固定身高的父母内部的柔性孩子的控制比率

Question

我希望获得与here解释的结果相似的结果。我在下面添加了确切的代码段：

flex: 1 1 0;

在这里，我们说的是项目尺寸， 空间分布计算为0-所有空间都可以使用 并且由于所有项目都具有相同的弹性增长因子，因此它们各自 等量的分布空间。最终结果是三个相等 宽度，柔性物品。

我将使用一排垂直子级和一排水平子级，但是工作应该没有什么不同。

我的问题是，在上面的示例中，已设置了显式宽度（在我的情况下为高度），而我不能这样做。我希望创建四个均等大小的季度，不管每个季度包含什么内容。

简而言之–是否有一种方法可以在没有显着高度的父级内部具有相等高度且内容不同的子div？

任何帮助都将不胜感激！

Answer 1

经过大量测试，我意识到使用flexbox不可能（至少很容易）。但是，使用CSS Grid非常简单。对于对解决方案感兴趣的任何人，这就像给每个“模块”一个值1fr一样容易。