Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
Type de valeur
Décimal+
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)
Statut du document:: CR (document proposé pour la recommandation)

Description de la propriété flex-shrink.

flex-shrink définit si un élément flexible peut réduire sa largeur(1) 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.

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.

  • flex-shrink: initial; flex-shrink: inherit; flex-shrink: revert; flex-shrink: revert-layer; flex-shrink: unset;

    La valeur initiale est : 1.

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.

 
 
 

Simulateur.

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 :
A
B
C
D

Prise en charge par les navigateurs (compatibilité).

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 générale des mises en page avec des conteneurs flex-box.
Colonne 2
Support de la propriété flex-shrink
1
Flex˗box
2
flex-shrink
Estimation de la prise en charge en pourcentage du parc actuel.
98%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que flex-shrink.

Les spécifications CSS éditées par le W3C sont organisées en modules. flex-shrink fait partie du Module CSS - Mise en page par flex-box (CSS Flexible Box Layout Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
Détermine la dimension par défaut d'un élément contenu dans un flex-box.
Choisit l'axe principal et l'axe secondaire d'un flex box.
Echaînement des éléments enfant dans un flex-box.
Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
Gestion des retours à la ligne dans un container flex.
Ordre des éléments dans un flex-box.