Flex 布局中一个不为人知的特性

开发 前端
关于本文要说的这个特性,我之前也不清楚,还是遇到问题之后,阅读规范才知道的,故事是下面这样的.来看一下吧。

[[433102]]

 今天给大家带来一个 Flex 下极容易被忽视的一个细节点。

正文从下面开始~

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

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

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

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

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

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

[[433105]]

想来我非常普通的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时,此时也不能按照预期缩小。可能这个时候,第一反应是给 item 加 flex-shrink,然而并木有用。—— 当 min-width是 auto 时,其最小尺寸是基于内容的,加 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真是太复杂了... 

 

责任编辑:庞桂玉 来源: 前端大全
相关推荐

2010-08-05 11:14:12

Flex优势

2024-05-17 13:08:46

Python代码

2020-02-20 12:02:32

Python数据函数

2010-09-03 08:52:38

CSS

2010-09-06 14:19:54

CSS

2011-10-19 16:19:27

iOS 5苹果

2021-11-09 07:34:34

Python函数代码

2023-11-09 08:05:40

IDEA开发工具

2010-04-19 16:09:22

Oracle控制文件

2013-08-09 09:27:08

vCentervSphere

2021-01-15 09:00:00

人工智能IT数据

2011-11-15 10:25:56

IBMWindows

2011-11-08 13:41:27

苹果siri人工智能数据中心

2014-08-18 10:44:31

斯诺登

2012-11-30 14:13:01

2011-11-14 10:06:16

IBM大型机支持Windows系统POWER7

2021-02-05 09:58:52

程序员Windows系统

2017-03-28 08:40:14

2014-05-04 11:17:39

Unix命令Linux命令

2018-09-14 09:12:00

数据库MySQL索引约束
点赞
收藏

51CTO技术栈公众号