flex - Propriété CSS
Résumé des caractéristiques de la propriété flex
auto
0 1 auto
flex
passe progressivement d'une valeur à une autre.Description de la propriété flex
.
flex
définit la largeur des éléments dans un flex-box, ainsi que leur capacité à s'élargir
ou se rétrécir en fonction de la place disponible.
Plus précisément, flex
définit la dimension de l'élément suivant l'axe principal.
Mais comme ce dernier est souvent horizontal, c'est le plus souvent la largeur des éléments qui
est affectée par flex
.
flex
doit être appliquée aux éléments internes d'un flex-box, et non pas au container flex lui-même.
car la propriété n'est pas héritée par défaut.
flex
est une propriété raccourcie qui regroupe les valeurs des propriétés suivantes :
flex-grow
: définit si les éléments peuvent s'agrandir pour remplir le container flex.flex-shrink
: définit si les éléments peuvent se rétrécir si la place dans le container flex est insuffisante.flex-basis
: définit la dimension de base des éléments dans un container flex-box.
Rappel : dans un flex-box, les éléments ont une dimension de base (flex-basis
) mais peuvent
s'agrandir ou se rétrécir en fonction de la place disponible. L'agrandissement est géré par flex-grow
et le rétrécissement par flex-shrink
.
Pour une bonne compréhension des flex-box, nous vous recommandons la lecture du tutoriel sur les flex-box.
Rappel : si le container a un axe principal vertical (flex-direction:column
), tout ce qui
vient d'être dit s'applique à la hauteur des éléments dans le flex-box, et non plus à leur largeur.
Syntaxes pour flex
.
number1
est une valeur numérique sans unité, correspondant à flex-grow
.
number2
est une valeur numérique sans unité, correspondant à flex-shrink
.
length
est une valeur numérique suivie d'une unité de dimension.
- flex: none; flex: 0 0 auto;
La valeur
none
est équivalente à0 0 auto
, c'est à dire que l'élément n'est plus du tout élastique (ni agrandissement ni rétrécissement) et sa taille est déterminée par sa propriétéwidth
.
En conséquence, les éléments peuvent ne pas occuper toute la place disponible dans le conteneur, ou au contraire dépasser du conteneur. - flex: auto; flex: 1 1 auto;
Ces deux syntaxes sont équivalentes. La largeur des éléments est définie par leur propriété
width
, ou, à défaut, par le contenu de l'élément. Mais les éléments sont flexibles dans les deux sens : ils s'agrandissent ou se rétrécissent pour occuper toute la place disponible, sans la dépasser. - flex: content; flex: min-content; flex: max-content; flex: fit-content;
La largeur des éléments est définie par leur contenu.
content
est généralement traité commemax-content
par les navigateurs.Si nécessaire, reportez-vous à la définition précise de ces valeurs :
max-content
, ,fit-content
. - flex: 0 1 auto;
Valeur par défaut. La largeur des éléments est définie par leur propriété
width
. Si cette dernière n'est pas définie ou est définie elle-même surauto
, c'est le contenu qui définit la taille de l'élément.Les éléments ne s'agrandissent pas, même s'il reste de la place dans la largeur du container, mais ils peuvent se rétrécir si la largeur du container est insuffisante.
- flex: 0 2 200px;
Exemple d'une syntaxe qui pourrait être appliquée à un des élément du flex-box.
La largeur de l'élément est par défaut fixée à 200 pixels, mais il peut se rétrécir si la place dans le conteneur est insuffisante. Cet élément se réduira deux fois plus que d'autres qui ont la valeur1
pourflex-shrink
. Par contre l'élément ne pourra pas s'agrandir, même s'il reste de la place disponible dans le container.Si la dimension est exprimée en pourcentages, elle sera calculée par rapport à la dimension du conteneur.
La valeur initiale est :
.0 1 auto
Exemple d'animation avec flex
.
L'exemple ressemble beaucoup à ceux de et flex-shrink
, ce qui est assez normal
puisque flex
est leur propriété raccourcie.
Prise en charge par les navigateurs (compatibilité).
Les mises en page utilisant des conteneurs flex-box sont maintenant bien prises en charge par tous les navigateurs, comme on peut le constater
sur le tableau de compatibilité ci-après.
Les trois propriétés CSS équivalentes à flex
sont également bien reconnues.
flex-basis
flex-grow
flex-shrink
flex-basis
flex-grow
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
.
Les spécifications CSS éditées par le W3C sont organisées en modules. flex
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.