Flex-shrink - Propriété CSS

flex-shrink

Résumé des caractéristiques de la propriété `flex-shrink`

Description rapide

Autorise ou non la compression d'un élément contenu dans un flex-box.

Statut

Standard

Utilisable sur

HTML

Pourcentages

Ne s'appliquent pas.

Valeur initiale

1

Héritée par défaut

Non.

Type d'animation

Computed value : lors d'une animation, la propriété flex-shrink passe progressivement d'une valeur à une autre.

Module W3C

Module CSS - Mise en page par flex-box

Références (W3C)

CSS Flexible Box Layout Module Level 1

Statut du document: CR (document candidat à la recommandation)

Description de la propriété `flex-shrink`.

flex-shrink définit si un élément flexible peut réduire sa largeur ⁽¹⁾ dans le cas où 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é flex-basis), 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, flex-grow et flex-basis. Leur fonctionnement est très lié, aussi nous vous conseillons de les définir toutes les trois ensemble avec la propriété résumée flex.

(1) En fait la propriété agit dans l'axe principal du container flex, qui est souvent horizontal dans les langues européennes. 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.

Valeurs 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.

Valeurs communes à toutes les propriétés :


flex-shrink: initial  (1)
flex-shrink: inherit
flex-shrink: revert
flex-shrink: revertLayer
flex-shrink: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'Exemple d'animation de `flex-shrink`.

Une animation sur flex-shrink a été appliquée aux trois éléments du flex-box ci-dessous. La durée de chacune des animations est différente et elles ne sont pas multiples entre elles. Ceci afin de donner l'impression d'un mouvement non répétitif. En fait il se répète toutes les 30 secondes (2s x 3s x 5s = 30s).

La largeur par défaut de chacun des éléments a été définie à 100% afin de maximiser l'effet de flex-shrink.

Exemple interactif avec la propriété `flex-shrink`.

Le simulateur ci-dessous applique les valeurs que vous choisissez aux deux cadres bleus. 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, la propriété flex-shrink est à sa valeur par défaut : 1, pour tous les cadres. Le navigateur a donc le droit de réduire la largeur de tous les éléments à 25% pour que l'ensemble tienne dans la largeur du container.

Observez qu'en fixant flex-shrink des deux éléments bleus à 0, ceux-ci retrouvent leur largeur de base de 30%. Observez également que les deux éléments bleus se répartissent la réduction de taille en fonction de la valeur relative appliquée à leur propriété flex-shrink.

flex-shrink :

Compatibilité des navigateurs avec `flex-shrink`.

La gestion des flex-box et la propriété flex-shrink ne posent plus de problème avec les navigateurs actuels.

Colonne 1

Prise en charge des conteneurs flex-box de façon générale.

Colonne 2

Prise en charge de la propriété flex-schrink pour autoriser le rétrécissement d'un élément flex.

Remarques :

(1) Implémentation partielle. De nombreux bogues présents.

Support des
Flex-box

Propriété
flex-shrink

Estimation de la prise en charge globale.

97%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété `flex-shrink`.

Module CSS - Mise en page par flex-box - Niveau 1

Première définition de la propriété flex-shrink.

23 Juillet 2009
Document de travail.
18 Septembre 2012
Candidat à la recommandation.

Voir aussi, à propos des flex-box.

Les spécificités des flex-box sont décrites dans le module CSS Flexible Box Layout Module. La propriété flex-shrink y figure, ainsi que toutes celles qui sont listée ci-dessous.

Propriétés :

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

Enchaî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-box.

order

Définit l'ordre des éléments dans un flex-box.