如何防止 Flex 項目拉伸到容器寬度？

如何強制Flex 項目適應內容，而不是容器寬度

在Flex 佈局中，元素自然拉伸以填充其父元素的寬度容器。當您希望子元素僅包裝其內容時，這可能是不可取的。以下是如何強制執行此行為：

使用align-items/align-self的解決方案

在容器上設定align-items: flex-start，或align-self ：彈性項目上的彈性啟動。這會覆蓋預設的align-items：stretch，當flex-direction為column時，這會導致專案展開以填充容器的水平空間。

工作原理

透過設定align-items: flex-start，您可以強制項目將自身與容器的起始邊緣對齊。由於設定了列方向，因此起始邊緣是左邊緣。這會強制項目保持與其內容一樣寬。

範例：

相關概念

• 交叉軸於主佈局的軸axis（在列佈局中水平排列）。
• align-items: 沿交叉軸對齊彈性項目。

align-self: 類似於對齊項目，但特定於各個彈性項目。

以上是如何防止 Flex 項目拉伸到容器寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！