如何確保 Flexbox 佈局中所有元素的寬度相等？

Flexbox：確保所有元素的寬度相等

在嘗試建立具有不同項目數量的響應式Flexbox 導覽列時，開發人員可能會遇到元素之間寬度分佈的問題不均勻。本文探討了這項挑戰的解決方案。

背景

本教學最初使用 display:table 來實現等寬分佈，但在轉向 Flexbox 時遇到了問題。 Flexbox 預設的 flex-basis 為 auto，它使用內容大小作為每個 Flex 項目的初始大小。因此，內容大小較大的項目會佔用更多空間。

解：Flex-basis 為 0

為了確保所有元素的寬度相等，我們將 flex-basis 設為 0。這消除了初始值大小，留下所有剩餘空間根據 flex-grow 按比例分配。

範例

以下程式碼片段示範如何將flex-basis 設定為0 解決問題：

li {
  flex-grow: 1;
  flex-basis: 0;
  /* ... */
}

視覺解釋

CSS Flexbox 規格中的下圖說明了flex-basis 的概念：

[來自CSS Flexbox規範的圖表]

工作範例

參考修改後的Fiddle觀察等寬分佈：

[Working Fiddle]

以上是如何確保 Flexbox 佈局中所有元素的寬度相等？的詳細內容。更多資訊請關注PHP中文網其他相關文章！