【CSS】1068- Flex布局中一个不为人知的特性

09/02 08:27
阅读数 45

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

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

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

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

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

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

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

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

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

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

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

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

读到这里,我意识到这个问题跟Flex嵌套应该没什么关系,不嵌套应该也一样存在这个问题,于是我又新写了个demo,可以戳这个查看:https://codepen.io/yvettelau/pen/poRgYPK?editors=1100

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

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

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

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

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

参考链接:

  1. https://www.w3.org/TR/css-flexbox-1/#transferred-size-suggestion
  2. 还有一个忘记保存链接的stackflow

1. JavaScript 重温系列(22篇全)
2. ECMAScript 重温系列(10篇全)
3. JavaScript设计模式 重温系列(9篇全)
4.  正则 / 框架 / 算法等 重温系列(16篇全)
5.  Webpack4 入门(上) ||  Webpack4 入门(下)
6.  MobX 入门(上)  ||   MobX 入门(下)
7. 120 +篇原创系列汇总

回复“加群”与大佬们一起交流学习~

点击“阅读原文”查看 120+ 篇原创文章

本文分享自微信公众号 - 前端自习课(FE-study)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部