flex-basis, flex-grow, flex-shrink

Note

Les propriété présentées ici s’applique aux items flexbox, mais pas aux conteneurs flexbox.

Les propriété flex-basis permet d’indiquer l’encombrement par défaut d’un élément le long de l’axe principal du conteneur flex, avant distribution de l’espace disponible. flex-shrink permet d’indiquer le comportement de l’élément s’il y a moins d’expace disponible que d’espace encombré par les éléments. flex-grow, quant à lui, indique comment l’élément doit s’agrandir si de l’espace est disponible.

flex-basis

selecteur-item {
   /* On définit une largeur */
   flex-basis: 10em;
   flex-basis: 3px;
   flex-basis: auto;

   /* On utilise les dimensions       */
   /* intrinsèques avec des mots-clés */
   flex-basis: fill;
   flex-basis: max-content;
   flex-basis: min-content;
   flex-basis: fit-content;

   /* La taille se calcule automatiquement */
   /* en fonction du contenu de l'élément  */
   flex-basis: content;
}

Voir aussi

• la propriété flex-basis sur le MDN

flex-shrink

selecteur-item {

   flex-shrink: 2;
   flex-shrink: 1;

}

Voir aussi

• la propriété flex-shrink sur le MDN

flex-grow

selecteur-item {

   flex-grow: 2;
   flex-grow: 1;

}

Voir aussi

• la propriété flex-grow sur le MDN

.

exercice

Continuez le travail précédent et testez la propriété flex-grow sur l’élément possédant la classe « grow ».