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;
}

内容长度合适时：

一份美食

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

内容长度过长时：

一份美食

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

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

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

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

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

贡献者

• liuyanliang

版权所有

版权归属：liuyanliang

本文链接：/defensive-css/default-flexbox-stretching/

许可证：署名-非商业性-禁止演绎 4.0 国际 (CC-BY-NC-ND-4.0)