Flex - Propriété CSS

Schéma syntaxique de flex.

Description des termes utilisés sur le schéma :

• 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.
• % est un pourcentage calculé par rapport à la dimension du conteneur flex.

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

Rappel : la propriété flex n'a de sens que si elle est appliquée à un conteneur du type flex-box. Voir la propriété display.

Valeurs pour flex.

• 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é comme max-content par les navigateurs.

  Si nécessaire, reportez-vous à la définition précise de ces valeurs : max-content, min-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 sur auto, 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 valeur 1 pour flex-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.

Valeurs standards :

Exemple d'animation avec flex.

L'exemple ressemble beaucoup à ceux de flex-grow et flex-shrink, ce qui est assez normal puisque flex est leur propriété raccourcie.

Prise en charge de flex par les navigateurs.

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.

Remarques :

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

(2) Quand flex-basis est positionné sur une valeur différente de auto, IE calcule les dimensions des éléments comme s'il s'agissait de boîtes classiques, et ceci quelque soit la valeur donnée à box-sizing.

1

Support des
Flex-box

2

Propriété
flex-basis

3

Propriété
flex-grow

4

Propriété
flex-shrink

Estimation de la prise en charge globale.

97%

96%

95%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

2

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

Caniuse

Caniuse

Caniuse

Historique de la propriété flex.

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

  La première introduction de la propriété flex figure dans ce module.
  

  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 dans le module CSS Flexible Box Layout Module. La propriété flex y figure, ainsi que toutes celles qui sont listée ci-dessous.

Propriétés :