Flexbox intermédiaire

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.

Les unités négatives, ne sont pas permises.
flex-grow flex-grow

EXERCICE Flexbox Zombie - Chapitre 5 On étire la sauce/glue.
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%;.

Les unités négatives, ne sont pas permises.
flex-shrink flex-shrink

EXERCICE Flexbox Zombie - Chapitre 6 On commence à se sentir à l'étroit.
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-growou 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.

La propriété flex-basisrespecte les limites configurées via les propriétés min-width, max-width, min-height et max-height.

Par défaut, cette valeur est àauto.

Les unités négatives, ne sont pas permises.
flex-basis flex-basis

EXERCICE Flexbox Zombie - Chapitre 7 Dans un monde parfait!
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.

La propriété order n’affecte aucunement les pseudo-classes telles que:nth-child(). order order

EXERCICE Flexbox Zombie - Chapitre 8 Dans le désordre.
EXERCICE Flexbox Pony Pour cet exercice vous devrez recréer une navigation responsive pour la marque de vêtements montréalaise Pony. Afin de réussir, vous aurez...
EXERCICE Flexbox - Actualités Google Pour cet exercice vous devez recréer à l’aide de flexbox le module d’actualités affiché sur la page de résultat de Google.
EXERCICE Flexbox Defense Niveaux 14 à 17 Complétez les 3 niveaux de 10 à 12 de Flexbox Defense
EXERCICE Flexbox Froggy Niveaux 14 à 17 Complétez les 4 niveaux de 14 à 17 de Flexbox Froggy