如何使 Flex 項目按比例擴展至原始尺寸？

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

在 HTML 和 CSS 中，通常使用 Flexbox 來輕鬆創建靈活和動態的佈局。但是，在某些情況下，您可能希望 Flex 項目能按其原始大小按比例擴展，即使容器的整體寬度變化也能保持其相對寬度。

在典型的 Flexbox 設定中，您可以使用 Flex： 1 讓所有項目均等擴展，無論其初始大小為何。然而，這種方法會導致所有項目具有相同的寬度。為了克服這個問題，您可以利用 flex-basis 屬性。

Flex-Basis 和 Flex-grow

flex-basis 定義 Flex 專案的初始寬度。預設情況下，它的值為 auto，這表示它會根據項目內容的大小進行調整。與 flex-grow 結合使用時，您可以控制容器中多餘的空間如何在 Flex 項目之間分配。

使用 flex-basis: auto，flex-grow 只分配 多餘的 空間，不包括物品內容佔用的空間。這可確保項目按其原始大小按比例擴展。

範例：調整按鈕寬度

考慮一排寬度不同的按鈕。使用以下CSS，所有按鈕將展開以填充可用空間，並保持其相對大小：

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

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

或者，您可以使用以下簡寫符號：

.button {
  flex: 1 1 auto;
}

結論

透過了解flex-basis 和flex-grow 之間的相互作用，您可以確保Flex項目按比例擴展至原始大小，同時尊重它們各自的寬度。這種方法為動態佈局和響應式設計提供了更大的靈活性。

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