CSS - Propriété flex-shrink
Description de la propriété flex-shrink.
flex-shrink définit si un élément flexible peut réduire sa largeur(1)
si l'espace est insuffisant dans le container flex-box.
Si tous les éléments tiennent dans la largeur du flex-box (en fonction de leur propriété Object),
flex-shrink n'aura aucun effet.
flex-shrink n'a aucun effet sur les éléments qui ne sont pas dans un container flex-box.
Trois propriétés agissent sur les dimensions d'un élément dans un flex-box : flex-shrink,
Object et Object. Leur fonctionnement est très lié, aussi nous vous
conseillons de les définir toutes les trois ensemble avec la propriété raccourcie flex.
(1) En fait la propriété agit dans l'axe principal du container flex, qui est souvent horizontal.
Mais si l'axe principal du container est vertical, flex-shrink agit sur la hauteur de l'élément.
Voir la propriété flex-direction pour plus d'information sur le choix de l'axe principal.
Syntaxes pour flex-shrink.
flex-shrink: 0;L'élément n'est pas autorisé à se rétrécir, même s'il manque de place dans le container flex.
flex-shrink: 2;Une valeur numérique supérieure à 0, sans unité. L'élément peut se rétrécir s'il manque de la place dans le container flex.
-
Reportez-vous à la description générale de ces valeurs.
Simulateur.
Le simulateur ci-dessous applique les valeurs que vous choisissez aux
deux cadres rouges. Par défaut, tous les cadres ont flex-basis:30%;.
ce qui donne une largeur totale plus grande que celle du container (4 x 30% = 120%).
Par ailleurs, leur propriété flex-shrink est à sa valeur par défaut : 1.
Le navigateur a donc le droit de réduire la largeur de tous les éléments à 25%.
Observez qu'en fixant flex-shrink des deux éléments bleus à 0, ceux-ci retrouve leur
largeur de base de 30%.
Observez également que les deux éléments bleus se répartissent la réuction de taille en fonction de la valeur
relative appliquée à leur propriété flex-shrink.
flex-shrink :
Voir aussi...
Flex-box - Propriétés.
align-content: Disposition des lignes dans un flex-box ou une grille.align-items: Disposition verticale des éléments dans un flex-box ou une grille.align-self: Position verticale de l'un des éléments dans un flex-box ou une grille.display: Type de l'élément et la façon de l'afficher.flex: Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.flex-basis: Détermine la dimension par défaut d'un élément contenu dans un flex-box.flex-direction: Choisit l'axe principal et l'axe secondaire d'un flex box.flex-flow: Echaînement des éléments enfant dans un flex-box.flex-grow: Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.flex-wrap: Gestion des retours à la ligne dans un container flex.justify-content: Définit le positionnement horizontal dans un flex-box ou une grille.order: Ordre des éléments dans un flex-box.