Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

flex-flow - Propriété CSS

flex-flow

Résumé des caractéristiques de la propriété flex-flow

Description rapide
Echaînement des éléments enfant dans un flex-box.
Statut
Standard
Type de valeur
Voir les propriétés individuelles.
Valeurs prédéfinies
row | row-reverse | column | column-reverse | nowrap | wrap | wrap-reverse
Pourcentages
Ne s'appliquent pas.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété flex-flow passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Mise en page par flex-box
Références (W3C)
Statut du document:: CR (document proposé pour la recommandation)

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

Syntaxes pour flex-flow.

Syntaxe de flex-flowSchéma syntaxique de la propriété CSS flex-flow (organisation des éléments dans un conteneur flex). row row row-reverse row-reverse column column column-reverse column-reverse nowrap nowrap wrap wrap wrap-reverse wrap-reverseflex-flow:;flex-flow:;Télécharger l'image en SVG
  • 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;
  • flex-flow: initial; flex-flow: inherit; flex-flow: revert; flex-flow: revert-layer; flex-flow: unset;

    La valeur initiale est : Voir les propriétés individuelles..

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

flex-flow :
1
2
3
4
5
6
7
8

Prise en charge par les navigateurs (compatibilité).

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.

Colonne 1
Prise en charge générale des mises en page avec des conteneurs flex-box.
Colonne 2
Support de la propriété CSS flex-flow
1
Flex˗box
2
flex-flow
Estimation de la prise en charge en pourcentage du parc actuel.
98%
95%

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

Les spécifications CSS éditées par le W3C sont organisées en modules. flex-flow 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.

Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
Détermine la dimension par défaut d'un élément contenu dans un flex-box.
Choisit l'axe principal et l'axe secondaire d'un flex box.
Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
Autorise ou non la compression d'un élément contenu dans un flex-box.
Gestion des retours à la ligne dans un container flex.
Ordre des éléments dans un flex-box.