Default FlexBox Stretching

约 552 字大约 2 分钟

2023-08-11

Default FlexBox Stretching

在 flexbox 中，flex 项的默认行为是拉伸。如果子项的内容长于其同级项，则会导致其他项拉伸。

但这不容易被发现，除非我们向 Flex 项中添加比预期更长的内容。

在这个示例中，我们有一个包含图像、标题、介绍的组件。

<div class="food">
  <img class="food__img" src="image/food.jpg" alt="" />
  <div class="food__content">
    <h3>一份美食</h3>
    <p><!-- Description goes here.. --></p>
  </div>
</div>

.food {
  display: flex;
}

内容长度合适时：

一份美食

这是一份看起来美味的食物

内容长度过长时：

一份美食

这是一份看起来美味的食物

可以发现，当内容长度过长时，搞过了图片的高度时，图片被拉伸了。

为了解决这个问题，我们需要覆盖默认的拉伸行为。

.food__img {
  align-self: flex-start;
}

内容长度合适时：

一份美食

这是一份看起来美味的食物

内容长度过长时：

一份美食

这是一份看起来美味的食物