刘明野

Flex items and min-width:0

之前我写过使用 flexbox 构建响应式布局的文章。然而,当使用 flexbox 进行布局时,有一种行为可能会让人感到意外。在布局中,flex 项的内容可能会使其无法正确地缩小。例如,假设您在布局中显示了一个很长的 URL,您想要截断它。应用 overflow: hidden 不会像您期望的那样使项缩小。您可以在这个 codepen 中看到一个例子,在调整浏览器大小时会发生这种情况。

这可能看起来像是一个 bug,但实际上它是 flexbox 规范 的一部分。

在规范中,它写道:
默认情况下,flex 项不会缩小到小于它们的最小内容大小。

这意味着项的最小宽度设置为其内容的宽度,并且不会缩小到小于该宽度。这可能会导致布局显得不均匀或过早地换行。通过向该项添加 min-width: 0,它将以正确的比例调整大小,并仍然按预期应用溢出。您可以在这里看到一个例子。

如果想要了解有关这个问题和其他与 flexbox 相关的问题,可以查看已知 bug 列表w3 规范

转载自:https://dfmcphee.com/flex-items-and-min-width-0/

本文为作者刘明野发布,未经允许禁止转载!
2707
0
0
发表留言

友情链接