本文介绍了我不明白flex-grow属性吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
恐怕我不能理解flex-grow。如果你跳到下面的JSFiddle - 我理解的方式, .big
应该是其他 .list-item
。正如你可以看到的,不是这样。为什么?
.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>为什么这不是另一个尺寸的三倍?< / li> < / li>< / ul>
解决方案您必须为 flex- code>(不指定此属性会导致类似于使用初始值的行为,)。
向这两个孩子添加 flex-basis:0;
,或者只需使用:
.flex-item {
flex:1; / * flex-basis如果省略则为0 * /
}
.big {
flex-grow:3;
}
I'm afraid I must not understand flex-grow. If you jump to the JSFiddle below - the way I understand it, .big
should be three times the size of the other .list-item
. As you can see, not so. Why?
.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>
解决方案 You have to specify a value for flex-basis
as well (not specifying this property causes behaviour similar to using the initial value, auto).
Add flex-basis: 0;
to both children or just set it with the shorthand:
.flex-item {
flex: 1; /* flex-basis is 0 if omitted */
}
.big {
flex-grow: 3;
}
http://codepen.io/anon/pen/JEcBa
这篇关于我不明白flex-grow属性吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!