您的位置：首页 > 其它

flex布局踩过的坑：flex速记设置flex-grow和直接设置flex-grow的浏览器表现差异

2018-05-21 08:46 95 查看

今天看网上讲的二列布局，左侧宽度不固定，右侧宽度自适应的实现，其中有一例，code如下：

HTML代码：

<body>
<div id="parent">
<div id="left">左列不定宽</div>
<div id="right">右列自适应</div>
</div>
</body>

CSS代码：

#parent{
display: flex;
}
#left { /*不设宽度*/
margin-right: 10px;
height: 500px;
background-color: #f00;
}
#right {
height: 500px;
background-color: #0f0;

flex: 1;

/*均分#parent剩余的部分*/}作者：sweet_KK链接：https://juejin.im/post/5aa252ac518825558001d5de
来源：掘金
谢谢sweet_KK大大的好文，侵删，谢谢。
这个代码在Chrome 66下的表现为：

但是当我把代码的

flex: 1  // 改动成 ==> flex-grow:1

结果变成了

像这样，不再是右侧自适应了，当没有了空闲距离，二者因为内部字数相同，居然开始平分剩下的空间了？？？

what？难道flew：1不是和flew-grow：1一个意思么？

于是我又试了试...

先是flex：0.5：

然后是flex-grow：0.5：

另，在firefox中也是如此。

可以很明显的观察出，当时flex的时候，设置这个属性的flex项目不算，剩余空间的一半一直等于他的宽度，直到无法溢出了为止。但是flex-grow的时候呢？却是把本身就应该占据的空间除了外，剩下的空间再占一半。当没有剩余空间了，他就回归了本来的宽度，并且与左侧平分天下。

顺路一提，在flex下设置overflow：hidden之后会压缩到0，但flex-grow下仍然没用。

我认为就是浏览器对这两个属性的表现有所不同，如有高人踩过同一个坑，请不吝赐教！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航