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

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

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

  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.

1

Flex˗box

2

flex-basis

3

flex-grow

4

flex-shrink

Estimation de la prise en charge en pourcentage du parc actuel.

98%

95%

95%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Version testée : 109 (2023)

Baidu Browser

Version testée : 13.18 (2022)

Chrome

Version testée : 109 (2023)

Chrome pour Androïd

Version testée : 109 (2023)

Edge

Version testée : 109 (2023)

Firefox

Version testée : 109 (2023)

Firefox pour Androïd

Version testée : 107 (2022)

Internet Explorer

Version testée : 11 (2013)

KaiOS Browser

Version testée : 2.5 (2018)

Opéra

Version testée : 92 (2022)

Opéra Mobile

Version testée : 72 (2022)

QQ Browser

Version testée : 13.1 (2022)

Safari

Version testée : 16.2 (2022)

Safari sur IOS

Version testée : 16.2 (2022)

Samsung Internet

Version testée : 19.0 (2022)

Oméra mini

Version testée : Toutes

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

Caniuse

Caniuse

Caniuse

Caniuse

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.

Propriétés.