木灵鱼儿

木灵鱼儿

阅读：1999

最后更新：2020/12/25/ 10:33:27

flex-grow 1; 不能等分的问题

当我们给父元素设置flex布局的时候，子元素为了能够等分，常常flex-grow: 1;，但是你会发现，当里面有内容的时候，宽度就发生了变化，变得不是等分了。

所以我们可以理解：flex-grow: 1

其实他不是真正意义上的等分宽度，而是等分剩余宽度，而剩余宽度是总宽度减去内容宽度，再进行等分。而且这个等分甚至还是根据内容多少来等分，有的内容多，他等分还多一些。

所以这就很尴尬。

为此，如果想要真正的等分，就需要设置相同的width宽度。

如：

.value {
  width: 0;
  flex-grow: 1;
}

这样就行了。

width的值0我感觉是最好的，如果你设置其他宽度也行，具体看自己的需求。

文章分类 CSS
文章标签 弹性布局cssflexflex-grow等分
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 1999

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1999

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

目录树