点击此处查看最新的网赚项目教程

Hello 大家好,我是 Coco。今天给大家带来一个 Flex 下极容易被忽视的一个细节点。

正文从下面开始~

关于本文要说的这个特性,我之前也不清楚,还是遇到问题之后,阅读规范才知道的,故事是下面这样的:

某日被告知有一个bug:在网页宽度较小时,发现 Flex 容器被子元素撑大导致UI显示异常的问题,如下:

这是什么鬼…我期待它不管什么时候都能像下面这样显示(不撑破父容器):

我开始一顿操作猛如虎,各种审查元素样式,恕我愚钝,并没有看出什么问题,看起来似乎都很正确的样子….

当然,浏览器是不会骗我的,虽然,不知道哪里出了问题,但是这并不影响我修复这个问题。我试了试,发现加个 flex 容器加个 overflow:hidden 属性之后,完美解决问题。然后又试了试,发现加 min-width: 0 也可以解决这个问题。

bug 改好了,但是不知道为什么加个 overflow:hidden 或者 min-width: 0 就好了。

哪些网站用flex布局_弹性盒子布局flex_flex布局

想来我非常普通的CSS水平可能没有法解开这一难题,于是我开始思考朋友圈哪位大佬对CSS颇有研究,于是我就写了个最简的Demo,然后微信去请教了下大佬,大佬跟我说:原理说起来可就复杂了,然后分享我一篇文章链接。我看完之后,发现对我的问题并没有一个非常好的解释,于是又继续厚着脸皮问了,大佬说这块可能他也没有覆盖到。

好嘛,毕竟是周五,也不好一直骚扰大佬,于是,我就继续自己寻找答案。其实写最简Demo的时候,我发现了一个小小问题,那就是:其实这个问题出现在 Flex 嵌套之中,如果不是嵌套的话,那么 Flex 容器并不会被 Flex 的项目撑破。可以戳这个查看最简Demo:

弹性盒子布局flex_哪些网站用flex布局_flex布局

如果我们删除掉 div class=main 那一层,那么表现良好,即每个 item 都按照预期缩小了。

哪些网站用flex布局_弹性盒子布局flex_flex布局

然鹅,还是不知道原因吖,搜索引擎找了一番也没找到什么有说服力的答案,于是,我决定研究一下 flex 的规范(#min-size-auto),看到如下一段话:

哪些网站用flex布局_弹性盒子布局flex_flex布局

通过阅读标准,可以发现:

在非滚动容器中,主轴方向Flex Item 的最小尺寸是基于内容的最小尺寸,此时 min-width 的值是 auto。对于滚动容器,min-width 的值是 0(默认讨论水平布局)

读到这里,我意识到这个问题跟Flex嵌套应该没什么关系,不嵌套应该也一样存在这个问题,于是我又新写了个demo,可以戳这个查看:

弹性盒子布局flex_哪些网站用flex布局_flex布局

当 item 的内容 child 宽度是250px时,此时也不能按照预期缩小。可能这个时候,第一反应是给 item 加 flex-shrink,然而并木有用。—— 当 min-width是 auto 时,其最小尺寸是基于内容的,加 flex-shrink 是没有作用的。

这个时候就乖乖按照规范教的操作吧,例如,我们给 item 设置 min-width:0 ,这个时候,item 会按照预期缩小,平分500px的大小。

flex布局_弹性盒子布局flex_哪些网站用flex布局

另外,规范也说明了在滚动容器中,min-width 也是0,所以,给 item 增加 overflow: auto 或者 overflow: hidden 也一样可以达到目的。

现在,我们再回过头来看文章最开始的问题。看起来是 Flex 嵌套导致的问题,其实是因为嵌套在里面的 div ,它不仅仅是 Flex 容器,同时它也是一个 Flex Item。因此,我们可以给它加上 overflow: hidden 或者是 min-width: 0 来阻止它撑破父容器。

最后的最后,吐槽一句,CSS真是太复杂了…

参考链接:

#transferred-size-suggestion

还有一个忘记保存链接的stackflow

iCSS,不止于 CSS,如果你也对各种新奇有趣的前端(CSS)知识感兴趣,欢迎关注。同时如果你有任何想法疑问,欢迎加我的微信「coco1s」,一起探讨!

如果觉得这篇文章还不错,来个【转发、收藏、在看】三连吧,让更多的人也看到~

弹性盒子布局flex_哪些网站用flex布局_flex布局

———END———
限 时 特 惠: 本站每日持续更新海量各大内部创业教程,一年会员只需98元,全站资源免费下载 点击查看详情
站 长 微 信: cai842612