如何在 Flex 佈局中使 Flex-Grow 尊重專案的原始大小？

根據原始大小使 Flex-Grow 展開項目

在 Flex 版面中，flex-grow 屬性可用於按比例分配項目之間的可用空間。但是，預設情況下，flex-grow 會忽略這些項目的原始大小。

問題：均衡項目大小

當將 flex-grow設定為1、一行中的所有項目都拉伸以填充可用空間，從而導致相等widths:

解決方案：使用flex-auto

相對大小調整

根據它們的原始大小，我們可以使用flex-basis: auto 。這告訴瀏覽器在計算可用空間時要考慮內容大小。

使用flex: auto，項目現在將根據其原始寬度按比例填充可用空間：

說明

flex -grow 仍然規定了可用空間的分配方式，但首先考慮flex-basis 值。如果 flex-basis 為 auto，瀏覽器將確定每個項目的固有大小並從可用空間中扣除。然後根據 flex-grow 值分配剩餘空間。

在我們的範例中，所有項目都具有相同的 flex-grow 值 (1)，因此可用空間平均分配。然而，由於標題較大的項目具有較寬的內在尺寸，因此它會獲得較大部分的剩餘空間。

以上是如何在 Flex 佈局中使 Flex-Grow 尊重專案的原始大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！