如何阻止 Flexbox 中的 Flex 項目伸展？

防止 Flex 項目拉伸

使用 Flexbox 佈局時，Flex 項目可以拉伸並填充其容器中的可用空間。但是，在某些情況下，您可能希望防止這種情況發生。

為什麼 Flex 項目可以拉筋？

預設情況下，Flex 專案將沿著主軸拉伸他們的容器，通常是水平（行）或垂直（列）的。這是因為 flex 屬性預設為 1，這表示該項目應該是靈活的並且可以擴展以填充任何可用空間。

防止 Flex 項目拉伸

為了防止彈性項目拉伸，您可以透過將其設為 0 來覆蓋預設的彈性值。這將導致項目收縮以適合其內容，從而防止它佔用比

範例

考慮以下範例：

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}

<div>
  <span>This is some text.</span>
</div>

在此範例中，彈性項目（跨度）拉伸到填滿其容器的整個高度。為了防止這種情況，請將以下樣式新增至 div 元素：

align-items: flex-start;

這會將 Flex 項目沿其容器的開頭對齊，防止它們拉伸以填充整個高度。

以上是如何阻止 Flexbox 中的 Flex 項目伸展？的詳細內容。更多資訊請關注PHP中文網其他相關文章！