CSS Grid 如何实现等高行而 Flexbox 却不能？

CSS 网格布局中的等高行

使用 Flexbox 实现等高行是不切实际的，因为行高只能容纳它们包含的元素。不过 CSS Grid 提供了一个解决方案。

原理

要创建等高行的网格，将所有行设置为 grid-auto-rows: 1fr 是关键。

技术

网格布局中的fr单元分配空间根据容器内的可用空间均匀分配。当应用于行时（grid-auto-rows：1fr），每一行都占用相同部分的可用空间。

魔法背后的原因

网格布局规范指出，在处理灵活大小（不定高度）的网格，网格轨道（行）采用其内容的高度。每行中最高的项目决定所有行的高度。这个最大高度变成了 1fr 的长度，导致行高相等。

为什么 Flexbox 不能剪切它

Flexbox 只允许同一行内的行高度相等，因此不适合交叉-行均衡。根据 Flexbox 规范，在多行容器中，行高由容纳其 Flex 项目所需的最小高度决定。

以上是CSS Grid 如何实现等高行而 Flexbox 却不能？的详细内容。更多信息请关注PHP中文网其他相关文章！