防止 Flex 項目拉伸

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

為什麼 Flex 專案可以伸展？

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

防止 Flex 專案拉伸

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

範例

請考慮以下範例：

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

  This is some text.

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

align-items: flex-start;

這會將Flex 專案沿其容器的開頭對齊，防止它們拉伸到填滿整個高度。