Je ne comprends pas le flex-grow propriété?

Je crains que je ne doit pas comprendre flex-grow. Si vous sautez à la JSFiddle - dessous de la façon dont je le comprends, .big doit être trois fois la taille des autres .flex-item. Comme vous pouvez le voir, pas si. Pourquoi?

http://jsfiddle.net/nrur6mmo/

CSS:

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

HTML:

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

InformationsquelleAutor Ethan C | 2014-02-01
  1. 65

    Vous devez spécifier une valeur pour flex-basis ainsi (ne pas spécifier cette propriété entraîne un comportement similaire à l'aide de la valeur initiale, auto).

    Ajouter flex-basis: 0; pour les enfants ou tout simplement avec le abréviation:

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

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

    InformationsquelleAutor Natsu
  2. 25

    Flex-grow est souvent mal compris de cette façon. Flex-grow contrôle uniquement la façon dont le reste de l'espace est réparti entre la flex articles, et non pas comment ils sont gros en proportion les uns des autres.

    Ce que vous recherchez est vraiment juste ceci:

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

    Voir aussi

    • Qui va à l'encontre de la réponse sommet, où la proportion est fixée à 1:3, n'est-ce pas?
    InformationsquelleAutor cimmanon
  3. 4

    Les auteurs sont invités à une souplesse de contrôle à l'aide de la fonction "flex" abréviation plutôt qu'avec flex-grow directement, comme l'abréviation correctement réinitialise quelconque composants pour tenir compte des utilisations les plus courantes.

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

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

    C'est un exemple de travail

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

    • Quelques explications ici de ce qui est réellement définie seraient utiles.
    InformationsquelleAutor wilcus