如何使 Flex 專案根據其原始尺寸按比例展開？

按比例擴展Flex 項目到其原始大小

為了確保Flex 項目均勻擴展，同時保持其相對寬度，請從flex: 1 進行調整彎曲：自動。此開關會改變大小計算，考慮內容大小。

理解 Flex-grow 和 Flex-basis

Flex-grow，顧名思義，增加了項目的大小基於其定義的值和可用空間。但是，考慮 flex-basis 的作用很重要，它決定了專案的初始大小。

相對大小與絕對大小

當flex-basis 為設定為0 時，flex-grow 將所有空間視為可供分配的可用空間，從而導致絕對大小調整，其中項目的寬度相等，無論content.

相反，如果flex-basis 為auto （預設），則在計算可用空間之前會考慮內容大小。這可以實現相對大小調整，僅按比例分配額外的空間。

Flex 值的細分

• flex: 1: flex-grow: 1 (絕對大小）
• flex-grow: 1 : 相對大小、因子分解內容大小及可用空間
• flex: auto: 相當於flex-grow: 1 / flex-shrink: 1 / flex-basis: auto，這也是相對大小

透過使用flex: auto，按鈕將增加尺寸以填充行的剩餘寬度，同時保留其原始尺寸比例。這將確保最寬的按鈕即使在展開時也比其他按鈕更寬。

以上是如何使 Flex 專案根據其原始尺寸按比例展開？的詳細內容。更多資訊請關注PHP中文網其他相關文章！