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

使 Flex-Grow 項目依照原始大小展開

使用 Flexbox 設定元素樣式時，最好將容器中的剩餘空間分配給項目。但是，預設情況下，flex-grow 會為所有項目分配相同的寬度，無論其初始大小如何。要保留這種差異，請考慮將 flex-grow 設定為“auto”而不是“1”。

說明

Flex-grow 以兩個參數為基礎進行操作：可用可用空間和 flex-basis。可用空間是指容器中可以在彈性項目之間分配的剩餘空間。 Flex-basis 決定分配前每個項目的初始大小。

絕對大小（flex: 1）：

• 當 flex-basis 設定為 0 時，flex-grow 將整個可用空間視為可用空間。
• 這會導致所有大小按比例相等項目，無論其原始內容為何。

相對大小（flex: auto）：

• 當flex-basis 為auto（預設）時，flex-grow 會考慮每個項目的內容大小。
• 然後僅按比例分配容器中的剩餘空間是基於 flex-grow 值。

範例：

考慮三個不同寬度的按鈕。我們希望它們填充容器的剩餘寬度，每個按鈕都保持其比例大小。

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

.button {
  flex: auto;     // Relative sizing to maintain original proportions
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

透過將 flex-grow 設為 auto，按鈕將從目前大小按比例擴展，填充可用空間，同時保留它們最初的大小差異。

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