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 :

CSS - Propriété flex-flow

Description de la propriété flex-flow.

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

  • flex-direction : définit l'axe principal du container flex-box.
  • flex-wrap : gère les retours à la ligne à l'intérieur du container 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 appelons nous des colonnes).

Syntaxes pour flex-flow.

  • flex-flow: row wrap;
    Exemple avec flex-flow:row wrap
    Dans ce premier exemple de syntaxe, les éléments internes du flex-box se positionnent en ligne (côte à côte). Lorsque la largeur du container est remplie, les éléments suivants sont autorisés à commencer une nouvelle ligne.
  • flex-flow: row nowrap;
    Exemple avec flex-flow:row no-wrap
    Les éléments internes du flex-box se positionnent côte à côte, sur une seule ligne. Les retours à la ligne n'étant pas autorisés, les éléments internes peuvent déborder de la largeur du container.
  • flex-flow: row-reverse wrap;
    Exemple avec flex-flow:row-reverse wrap
    Les éléments internes du flex-box se positionnent côte à côte en commençant par la fin du container, Les retours à la ligne sont autorisés.
  • flex-flow: row-reverse wrap-reverse;
    Exemple avec flex-flow:row-reverse wrap-reverse
    Les éléments internes se positionnent côte à côte en commençant par la fin du flex-box, Les retours à la ligne se font également en sens inverse : la ligne suivante se positionne au dessus de la ligne précédente.
  • flex-flow: column wrap;
    Exemple avec flex-flow:column wrap
    Les éléments internes se positionnent en colonnes. Les retours étant autorisés, les éléments qui débordent la hauteur du container se positionnent sur une deuxième colonne.
  • flex-flow: initial;

    La valeur initiale est row no-wrap.

  • flex-flow: unset; flex-flow: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

writing-mode :
flex-flow :
1
2
3
4
5

Voir aussi...

Flex-box - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • display : Type de l'élément et la façon de l'afficher.
  • flex : Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
  • flex-basis : Détermine la dimension par défaut d'un élément contenu dans un flex-box.
  • flex-direction : Choisit l'axe principal et l'axe secondaire d'un flex box.
  • flex-grow : Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
  • flex-shrink : Autorise ou non la compression d'un élément contenu dans un flex-box.
  • flex-wrap : Gestion des retours à la ligne dans un container flex.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • order : Ordre des éléments dans un flex-box.