老子有钱娱乐老子有钱娱乐

老子有钱电话
lzyq官网

一个box-sizing: border-box和felx混合使用中遇到的问题

之前在项目中遇到一个布局上很趣的问题(也可能是笔者才疏学浅,哈哈)。布局大概是这样的:

 

外层包裹器:采用flex布局,并指定内部子弹性盒子元素水平显示侧边栏:flex盒子的子元素,可收起和展开。展开时显示菜单图标和菜单名称,收起时仅显示菜单图标。点击菜单图标或者文字(整个菜单项)跳转到预设置的路由上。展开时宽度为200px,收起时宽度为45px。头部与内容区域:flex盒子的子元素。设置为flex: 1,宽度由外层包裹器flex盒子和侧边栏宽度决定。项A、项B:flex盒子容器的子元素,水平显示,外层被flex布局的盒子容器包裹

看似是一个很平常的flex布局,但是收起来的时候却出现了横向滚动条,当时有点懵逼,所有元素都实现应用了box-sizing: border-box;的设置,怎么还会有这个情况,而且只是出现在侧边栏收起的时候才会。

排查过程中,首先想到的就是:是不是内容区域撑开了,导致总宽度增加了,一看还真是的:

外层盒子容器的宽度为1920px,侧边栏为45px,内容区域为1876px,计算结果:45 + 1876 - 1920 = 1,多了一个像素,TMD还有这奇葩情况。

好吧,再深入内容区域,发现内容区域内并没有自己溢出宽度,而是由保持充满外层宽度:

 

 

一行,也就是图中"fs-dashboard-row"类的元素的宽度为1856px,row里面水平排布的flex子元素项A和项B为923px宽度,刚好为1856。也就是说是这里超出了1px。为什么呢?

我试着把项A和项B的计算完成后的宽度设置为922.5px,也就是让一行row的宽度为1845px,但是我去改写的时候浏览器报了个错在控制台,重点来了:

报错信息:

For elements with box-sizing: border-box, only absolute content area dimensions can be applied.

翻译过来就是:

对于具有框大小的元素:边界框,只能应用绝对内容区域维度。

然后笔者再次双击修改width的宽度的地方,再退出修改,宽度就被还原回了923px。

也就是说,如果给一个盒子元素设置了box-sizing: border-box,它的宽度必须是一个整数,而在笔者的这个情况下,项A和项B被flex要实现宽度正真均分的话,是922.5px,但flex布局分配给它们的却是923px,各多出了0.5px,最后就多出了1px,而导致了横向滚动条的出现。罪魁祸首就是flex布局在计算宽度的时候,按照box-sizing: boder-box属性的这个原则,把922.5px的宽度给向上取整了。

一口老血喷了出来。因为我们不敢保证用户会把浏览器宽度拉伸成偶数还是奇数,拉伸成奇数就没这个问题,拉伸成偶数就有这个问题,我们单纯地在代码中调整宽度是没用的。

 

好吧,怎么解决这个问题,

笔者用了个最暴力的办法,给出现横向滚动条的那一层盒子元素设置overflow-x: hidden。

欢迎阅读本文章: 汤生

老子有钱娱乐

博马APP