flex-shrink - Propriété CSS
Résumé des caractéristiques de la propriété flex-shrink
1
flex-shrink
passe progressivement d'une valeur à une autre.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
.
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.
flex-shrink
flex-shrink
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.