flex-grow
Propriété pouvant être appliquée à un enfant dont le parent est en display: flex;.
Cette propriété accepte une valeur sans unité (bref, un chiffre) indiquant à l'élément qu'il peut grandir, quitte à dépasser son width, afin de remplir l'espace vacant dans son parent.
Par défaut, cette valeur est à 0.
Sans flex-grow vs flex-grow
À gauche, tous les éléments ont un width de base sans flex-grow.
À droite, l’élément #2 a la propriété flex-grow: 1; en plus lui permettant de s’agrandir.
Multiple flex-grow
Lorsque plusieurs éléments ont la propriété flex-grow, ils se partagent l'espace restant en fonction de la valeur qui leur est attribuée de façon proportionnelle.
Par exemple, s'ils ont tous la même valeur, ils grandiront tous de façon égale, tandis que si un élément à une valeur trois fois plus grande, il prendra trois fois plus d'espace que les autres.
À gauche, tous les éléments ont un flex-grow identique, flex-grow: 1;
À droite, l’élément #3 a un flex-grow: 3; lui permettant de prendre 3x plus d’espace restant.
flex-shrink
Propriété pouvant être appliquée à un enfant dont le parent est en display: flex;.
Cette propriété accepte une valeur sans unité (bref, un chiffre) indiquant la proportion avec laquelle l'élément devrait rétrécir en cas de besoin (si l'espace est insuffisant dans le parent). Bref, elle agit à l'inverse de flex-grow;
Par défaut, cette valeur est à 1.
Avec flex-shrink vs sans flex-shrink
Si tous les éléments ont la propriété width: 50%;, l'espace est théoriquement insuffisant afin que tous les éléments affichent sur une-même ligne. Cependant, lorsque des éléments sont enfants d'un parent en display: flex; celui-ci les forces à se compresser afin de rentrer sur une même ligne.
À gauche, tous les éléments ont un flex-shrink: 1;, donc rétrécissent de façon uniforme.
À droite, l’élément #2 a la propriété flex-shrink: 0;donc refuse de rétrécire et garde son width: 50%;.
- fxsh
- flex-shrink
- flex-shrink
flex-basis
Propriété pouvant être appliquée à un enfant dont le parent est en display: flex;.
Cette propriété accepte n'importe quelle unité de mesure CSS afin d'indiquer la dimension idéale d'un élément. La dimension attribuée constitue un point de départ avant qu'un flex-grow ou un flex-shrink n'intervienne. Dans le contexte d'un parent en flex-direction: row;, c'est en quelque sorte l'équivalent de la propriété width, tandis qu'en flex-direction: column; c'est l'équivalent du height.
Par défaut, cette valeur est à auto.
- fxb
- flex-basis
- flex-basis
order
Définis la priorité d'affichage d'un enfant dans un parent ayant la propriété display: flex;.
Par défaut, cette valeur est à 0.
Par défaut tous les éléments ont la même valeur d'ordre, ils s'affichent donc en fonction de leur ordre d'apparition dans le code, puisqu'aucun élément n'est jugé plus prioritaire qu'un autre. Cependant, si un élément à un ordre inférieur à 0 🔽, il se positionnera avant tous ceux ayant la valeur par défaut de 0. À l'inverse, si un élément à un ordre est supérieur à 0 🔼, il se positionnera après tous ceux ayant la valeur par défaut de 0.
À gauche, l’élément #2 à la propriété order: -1; lui donnant un ordre plus petit que les autres éléments.
À droite, l’élément #2 à la propriété order: 1; lui donnant un ordre plus grand que les autres éléments.