我不明白flex-grow属性吗？ [英] Do I not understand the flex-grow property?

问题描述

恐怕我不能理解flex-grow。如果你跳到下面的JSFiddle - 我理解的方式， .big 应该是其他 .list-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>为什么这不是另一个尺寸的三倍？< / li> < / li>< / ul>  

解决方案

您必须为 flex- code>（不指定此属性会导致类似于使用初始值的行为， auto ）。

向这两个孩子添加 flex-basis：0; ，或者只需使用速记：

  .flex-item {
 flex：1; / * flex-basis如果省略则为0 * / 
} 
 .big {
 flex-grow：3; 
} 
  

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

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?

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>

解决方案

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属性吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！