如何使 Flexbox 專案根據其初始大小按比例擴展？

依照原始大小製作Flex-Grow 展開專案

了解問題

在您的情況下，您有使用Flexbox 將多個按鈕排列成一行。您希望這些按鈕按比例增加寬度以填滿剩餘的行空間，同時保持其原始寬度差異。然而，在每個按鈕上設定 flex: 1 會導致所有按鈕的寬度變得相等。

解決方案：切換到 Flex: Auto

實現你想要的關鍵結果在於為 flex-grow 選擇正確的值。您應該使用 flex: auto 而不是 flex: 1。

Flex-Grow 的工作原理

flex-grow 根據以下條件在彈性項目之間分配容器中的可用空間兩個因素：

• 可用空間： 中未使用的空間行/列。
• Flex-basis: 考慮 Flex-grow 之前 Flex 項目的初始大小。

說明

使用 flex: 1 時，您將 flex-basis 設定為 0，將 flex-grow 設定為 1。這意味著 flexbox 會對待所有行中的空間作為可用空間，從而導致所有項目之間均等分配，無論其內容為何。

另一方面，flex：auto將flex-basis設定為auto，它會考慮先前項目內容的大小分配可用空間。這可確保專案保持其原始大小差異，同時仍填滿剩餘的行空間。

範例

在程式碼中，將每個專案的flex: 1 替換為flex: auto按鈕：

.button {
  flex: auto;  // Change from flex: 1
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

這將允許按鈕根據其原始寬度展開，滿足您的要求。

以上是如何使 Flexbox 專案根據其初始大小按比例擴展？的詳細內容。更多資訊請關注PHP中文網其他相關文章！