Do I not understand the flex-grow property?

问题

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 .flex-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>

回答1:

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

回答2:

Flex-grow is commonly misunderstood in this way. Flex-grow only controls how the left over space is distributed between flex items, not how big they are in proportion to each other.

What you're looking for is really just this:

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

回答3:

Authors are encouraged to control flexibility using the flex shorthand rather than with flex-grow directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

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

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

This is a working example

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

来源：https://stackoverflow.com/questions/21492513/do-i-not-understand-the-flex-grow-property

标签

css

flexbox

flex-grow