Flex-flow - Propriété CSS

Schéma syntaxique de flex-flow.

Description de la propriété flex-flow.

flex-flow est une propriété résumée qui permet de définir en une seule règle les deux propriétés suivantes :

• flex-direction : définit l'axe principal du conteneur flex-box.
• flex-wrap : gère les retours à la ligne (ou sur une nouvelle colonne) à l'intérieur du conteneur flex-box.

Les containers flex sont sensibles au sens d'écriture. Ce qui veut dire que la propriété writing-mode interagit également sur la notion d'axe principal. En écriture CJK par exemple, les lignes sont verticales (ce que, nous, en langue latine, appelons des colonnes).

Valeurs pour flex-flow.

• flex-flow: row;

  Dans ce premier exemple de syntaxe, l'axe principal est défini suivant les lignes du conteneur : les éléments internes du flex-box se positionnent les uns à côté des autres. Lorsque le bout de la ligne est atteinte, les éléments suivants ne sont pas autorisés à commencer une nouvelle ligne. Il y a donc risque de débordement du conteneur flex.

  Rappelons que l'axe principal et l'axe secondaire d'un conteneur flex sont définis par la propriété flex-direction.

  1

  2

  3

  4

  5

  6
  flex-flow:row;
• flex-flow: row wrap; flex-flow: row nowrap; flex-flow: row wrap-reverse;

  Les éléments internes du flex-box se positionnent comme dans notre premier exemple, c'est à dire qu'ils se disposent les uns à côté des autres sur une même ligne, mais la deuxième valeur détermine si les éléments peuvent commencer une nouvelle ligne :

  • wrap : les nouvelles lignes sont autorisées.
  • nowrap : les retours à la ligne ne sont pas autorisés. C'est la valeur par défaut.
  • nowrap : les retours à la ligne sont autorisés. La ligne suivante se positionne au dessus de la ligne précédente.
  1

  2

  3

  4

  5

  6
  flex-flow:row wrap;
  1

  2

  3

  4

  5

  6
  flex-flow:row wrap;
• flex-flow: row-reverse; flex-flow: row-reverse nowrap; flex-flow: row-reverse wrap; flex-flow: row-reverse wrap-reverse;

  L'axe principal du conteneur flex est défini suivant les lignes, mais avec un remplissge en ordre inverse : on commence à remplit à partir de la fin du conteneur. Les éléments internes du flex-box se positionnent donc côte à côte en commençant par la fin du conteneur, L'autorisation de retours à la ligne est définie par la deuxième valeur (voir ci-dessus).

  1

  2

  3

  4

  5

  6
  flex-flow:row-reverse wrap;
  1

  2

  3

  4

  5

  6
  flex-flow:row-reverse wrap-reverse;
• flex-flow: column; flex-flow: column nowrap; flex-flow: column wrap; flex-flow: column wrap-reverse;

  L'axe principal du conteneur est défini suivant les colonnes. Les éléments internes se positionnent donc les uns en dessous des autres. Les retours sur une nouvelle colonne sont autorisés ou pas, suivant la deuxième valeur (voir ci-dessus).

  1

  2

  3

  4

  5

  6
  flex-flow:column wrap;
  1

  2

  3

  4

  5

  6
  flex-flow:column wrap-reverse;
• flex-flow: column-reverse; flex-flow: column-reverse nowrap; flex-flow: column-reverse wrap; flex-flow: column-reverse wrap-reverse;

  L'axe principal du conteneur flex est défini suivant les colonnes avec un remplissage inversé : en commençant par la fin du conteneur. Chacun des éléments se positionne donc au dessus de l'élément précédent. Les retours sur une nouvelle colonne sont autorisés ou pas, suivant la deuxième valeur (voir ci-dessus).

  1

  2

  3

  4

  5

  6
  flex-flow:column-reverse wrap;
  1

  2

  3

  4

  5

  6
  flex-flow:column-reverse wrap-reverse;

Valeurs communes :

Animation de la propriété flex-flow.

Voici un petit effet visuel réalisé en animant les deux valeurs de la propriété flex-flow. Ceci dit, cette propriété n'est pas vraiment faite pour ça.

Simulateur avec la propriété flex-flow.

Prise en charge de flex-flow par les navigateurs.

Les mises en page par flex-box sont bien prises en charge par tous les navigateurs actuels. Il en est de même pour la propriété flex-flow.

Remarques :

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

1

Support des
Flex-box

2

Propriété
flex-flow

Estimation de la prise en charge globale.

97%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

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

Historique de la propriété flex-flow.

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

  Introduction de la première définition de la propriété flex-flow.
  

  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-flow figure dans ce module, ainsi que toutes celles qui sont listée ci-dessous.

Propriétés :