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中文網其他相關文章！