web-dev-qa-db-fra.com

Est-ce que je ne comprends pas la propriété flex-grow?

J'ai bien peur de ne pas comprendre le flex-grow. Si vous passez au JSFiddle ci-dessous - comme je le comprends, .big devrait être trois fois la taille de l'autre .flex-item. Comme vous pouvez le voir, non. Pourquoi?

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>
cssflexboxflex-grow
40
Ethan C

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

Ajouter flex-basis: 0; aux deux enfants ou définissez-le simplement avec le raccourci :

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

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

64
Natsu

Flex-grow est généralement mal compris de cette façon. La croissance flexible contrôle uniquement la façon dont l'espace restant est réparti entre les éléments flexibles, et non leur taille proportionnelle les uns aux autres.

Ce que vous cherchez est vraiment juste ceci:

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

Voir également

25
cimmanon

Les auteurs sont encouragés à contrôler la flexibilité à l'aide de la sténographie flexible plutôt qu'avec Flex-Grow directement, car la sténographie réinitialise correctement tous les composants non spécifiés pour s'adapter aux utilisations courantes.

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

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

Ceci est un exemple de travail

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

4
wilcus