如何使用 Flexbox 均勻分佈寬度不均勻的元素？

Flexbox 將不均勻的寬度分配給元素

問題：

您正在使用 Flexbox建立帶有項目數量不同（3-5），但寬度並未均勻分佈

分析：

Flexbox 預設的flex-basis 屬性為“auto”，這意味著元素的大小根據其內容而定。在您的範例中，文字內容較大的元素佔用更多空間。

解決方案：

為了確保均勻分佈，請設定 flex-basis: 0。初始彈性基礎為零，允許剩餘空間基於彈性成長按比例分配。必須設定 flex-grow 的值以確保它們均等擴展。

代碼：

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

說明：

flex-basis 的零值確保導航項目以相同的大小開始，無論內容如何。然後，flex-grow 為 1 會使它們均勻擴展以填充剩餘空間。

以上是如何使用 Flexbox 均勻分佈寬度不均勻的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！