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

在 CSS 网格布局中创建等高行

在 HTML 和 CSS 布局领域，实现等高行是一个简单的方法共同的挑战。传统上，这对于 Flexbox 来说是不可行的，因为它是基于行的高度计算，其中每一行都是由其最高的元素确定的。然而，CSS 网格布局的出现为这个问题提供了通用的解决方案。

解决方案：具有 1fr 单位的 CSS 网格布局

创建等高的关键网格中的行是利用 1fr 单位作为 grid-auto-rows 属性。该单位代表“分数单位”，表示网格容器内的灵活长度。

<br>grid-auto-rows: 1fr;<br>

通过将所有行的 grid-auto-rows 属性设置为 1fr，我们指示浏览器在它们之间平均分配可用的垂直空间。这会导致所有行具有相同的高度。

工作原理

1fr 背后的魔力在于它能够根据内容进行增长和缩小网格单元。当容器具有不确定的高度时（动态布局中经常出现这种情况），网格轨道（在我们的例子中为行）会自动调整大小以容纳最高的内容。

行的最大高度变为相当于 1fr，然后乘以分配的 1fr 值以确定每行的最终高度。本质上，所有行都会继承最高行的高度。

为什么 Flexbox 不是一个可行的选项

与网格布局不同，Flexbox 没有提供一种方法跨多行创建等高的行。根据 Flexbox 规范，每行的交叉尺寸（高度）被限制为适合其内容所需的最小高度。

这种行为使得单独使用 Flexbox 无法达到预期的效果。只有 CSS 网格布局提供了网格中所有行的等高行所需的灵活性和功能。

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