按比例擴展Flex 項目到其原始大小
為了確保Flex 項目均勻擴展,同時保持其相對寬度,請從flex: 1 進行調整彎曲:自動。此開關會改變大小計算,考慮內容大小。
理解 Flex-grow 和 Flex-basis
Flex-grow,顧名思義,增加了項目的大小基於其定義的值和可用空間。但是,考慮 flex-basis 的作用很重要,它決定了專案的初始大小。
相對大小與絕對大小
當flex-basis 為設定為0 時,flex-grow 將所有空間視為可供分配的可用空間,從而導致絕對大小調整,其中項目的寬度相等,無論content.
相反,如果flex-basis 為auto (預設),則在計算可用空間之前會考慮內容大小。這可以實現相對大小調整,僅按比例分配額外的空間。
Flex 值的細分
透過使用flex: auto,按鈕將增加尺寸以填充行的剩餘寬度,同時保留其原始尺寸比例。這將確保最寬的按鈕即使在展開時也比其他按鈕更寬。
以上是如何使 Flex 專案根據其原始尺寸按比例展開?的詳細內容。更多資訊請關注PHP中文網其他相關文章!