文章/答案/技术大牛

发布

社区首页 >问答首页 >我是不是不理解flex-grow属性？

问我是不是不理解flex-grow属性？
EN

Stack Overflow用户

提问于 2014-02-01 08:22:55

回答 3查看 39.7K关注 0票数 57

恐怕我不能理解flex-grow。如果你跳到下面的JSFiddle --据我所知，.big应该是其他.flex-item的三倍大小。如你所见，事实并非如此。为什么？

http://jsfiddle.net/nrur6mmo/

.flex-container {
    display:flex;
    padding:0 20%;
}
.flex-item {
    flex-grow:1;
    list-style-type:none;
    border:1px solid black;
}
.big {
    flex-grow:3;
}

<ul class="flex-container">
    <li class="flex-item big">Why isn't this exactly three times the size of the other one?</li>
    <li class="flex-item">Not really working like expected I don't think...</li>
</ul>

flex-grow

css

flexbox

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-02-01 08:50:59

您还必须为flex-basis指定一个值(不指定此属性会导致类似于使用初始值auto的行为)。

将flex-basis: 0;添加到两个子项中，或者只使用shorthand设置它

.flex-item {
    flex: 1; /* flex-basis is 0 if omitted */
}
.big {
    flex-grow: 3;
}

http://codepen.io/anon/pen/JEcBa

票数 79

Stack Overflow用户

发布于 2014-02-01 09:54:55

Flex-grow通常被误解为这种方式。Flex-grow仅控制剩余空间如何在flex项之间分配，而不是它们彼此之间的比例大小。

你要找的其实就是这个：

.flex-item {
  width: 25%;
  list-style-type:none;
  border:1px solid black;
}
.big {
  width: 75%;
}

另请参阅

票数 29

Stack Overflow用户

发布于 2016-05-25 06:59:40

鼓励作者使用flex速记来控制灵活性，而不是直接使用flex-grow，因为速记可以正确地重置任何未指定的组件，以适应常见用途。

https://drafts.csswg.org/css-flexbox/#propdef-flex-grow

.flex-item {
   flex: 1;
}
.big {
   flex: 3;
}

这是一个有效的示例

http://codepen.io/anon/pen/VjZYPV

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/21492513

复制

相似问题

问我是不是不理解flex-grow属性？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我是不是不理解flex-grow属性？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我是不是不理解flex-grow属性？
EN