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.