如何修復 Flexbox 導航中的不等寬度？

針對元素寬度不等的 Flexbox 進行故障排除

建立 Flexbox 導航佈局時，在元素之間實現寬度的均勻分佈至關重要。但是，有時您可能會遇到元素大小不同的問題。這可能是由於 flex-basis 的影響而出現的，該屬性定義了 Flex 項目的初始大小。

預設 Flex-Basis

預設情況下，flex-basis 設定為 auto，這表示彈性項目的初始大小由其內容大小決定。在您的範例中，文字內容較多的元素將獲得更多空間，因為它們的 flex-basis 較大。

將 Flex-Basis 設定為零

為了確保等寬分佈，您可以設定 flex-所有元素的基礎為 0。這將重設它們的初始大小，允許根據 flex-grow 按比例劃分任何剩餘空間，預設為 1。以下是更新後的程式碼：

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

範例小提琴

此程式碼調整可實現所需的結果，其中 Flexbox導航中的所有元素都有相同的寬度：

[已更新Fiddle](https://fiddle.jshell.net/h2db4yxw/11/)

可視化

來自flexbox規範的下圖說明了flex-basis的概念及其對元素的影響調整大小：

[flexbox中的 flex-basis 示意圖規範](https://www.w3.org/TR/css-flexbox-1/#flex-basis-property)

以上是如何修復 Flexbox 導航中的不等寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！