flex内容溢出

最新推荐文章于 2024-07-03 12:00:38 发布

Y_G_G

最新推荐文章于 2024-07-03 12:00:38 发布

阅读量2.1k

点赞数

分类专栏： CSS 文章标签： flex溢出 flex-basis

本文链接：https://blog.csdn.net/Y_G_G/article/details/108405514

版权

本文深入探讨了在Flex布局中内容溢出的根本原因——flex-basis，并提供了解决方案，包括设置width为0、使用min-width限制以及应用overflow:hidden。同时，解释了flex-basis与width的区别，强调了width作为回退选项的角色以及min-width和max-width对flex-basis的影响。

摘要由CSDN通过智能技术生成

参考资料：

Flex Basis与Width的区别
【CSS】flex-basis 文本溢出问题

flex溢出的根本原因是 flex-basis

解决方式：

设置width属性，一般设置为width: 0
min-width来限制，一般也是min-width: 0;
设置overflow:hidden

为什么？

设置width属性，只要width小于剩余空间即可，一般设置为width: 0;这样可百分之百确定小于剩余空间；
不设置width但用min-width来限制也是一样的，既然 flex 项的min-width:auto，那我们也设置一个小于剩余空间的值，一般也是min-width: 0;
设置overflow:hidden来限制溢出效果也是一致的。