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