La propriété CSS flex-flow

La propriété CSS flex-flow est une propriété raccourcie qui définit simultanément deux propriétés du conteneur flex : flex-direction (l'axe selon lequel les éléments sont disposés) et flex-wrap (si les éléments restent sur une seule ligne ou se répartissent sur plusieurs). Au lieu d'écrire deux déclarations séparées, vous les combinez en une seule ligne, ce qui rend votre CSS plus concis et l'intention plus claire.

Cette propriété appartient aux propriétés CSS3 et fait partie du module de mise en page Flexible Box. Elle n'affecte que les éléments dont la valeur de display est flex ou inline-flex ; sur un élément non-flex, elle n'a aucun effet, et si un conteneur flex ne contient pas d'éléments flexibles, il n'y a rien à disposer.

Cette page couvre la syntaxe de flex-flow, ce que fait chaque valeur, ainsi que des exemples exécutables pour chaque combinaison courante de direction et de retour à la ligne.

Ce que contrôle chaque valeur

flex-flow accepte une valeur flex-direction et une valeur flex-wrap, dans n'importe quel ordre :

flex-direction — l'axe principal et l'ordre que suivent les éléments le long de cet axe :
- row (par défaut) — de gauche à droite.
- row-reverse — de droite à gauche.
- column — de haut en bas.
- column-reverse — de bas en haut.
flex-wrap — ce qui se passe lorsque les éléments ne tiennent pas sur une seule ligne :
- nowrap (par défaut) — tous les éléments se tassent sur une seule ligne et peuvent se réduire.
- wrap — les éléments débordent sur de nouvelles lignes dans la même direction.
- wrap-reverse — les éléments se répartissent sur de nouvelles lignes dans la direction opposée de l'axe transversal.

La valeur initiale étant row nowrap, un conteneur flex sans flex-flow défini dispose ses éléments sur une seule ligne horizontale.

Les navigateurs modernes prennent en charge la propriété flex-flow nativement, sans préfixes vendeurs.

Valeur initiale	row nowrap
S'applique à	Conteneurs flex
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.flexFlow = "column nowrap";

Syntaxe

Syntaxe de la propriété CSS flex-flow

flex-flow: <flex-direction> || <flex-wrap>;
/* or */ initial | inherit;

Lorsque nous définissons flex-flow: row wrap;, la première valeur définit flex-direction et la seconde définit la propriété flex-wrap. Les deux valeurs sont indépendantes de l'ordre car elles acceptent des mots-clés différents, donc flex-flow: wrap row; est tout aussi valide. Vous pouvez également n'en fournir qu'une seule — par exemple flex-flow: column; laisse flex-wrap à sa valeur par défaut nowrap.

Exemple de la propriété CSS flex-flow

flex-flow: row wrap;

Le code suivant est équivalent au code ci-dessus.

Exemple des propriétés flex-direction et flex-wrap

flex-direction: row;
flex-wrap: wrap;

Exemple de la propriété flex-flow avec les valeurs « row » et « wrap » :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row wrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété flex-flow avec les valeurs « wrap-reverse » et « column » :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: column wrap-reverse;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété flex-flow avec les valeurs « row » et « nowrap » :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

Avec flex-flow: row nowrap, les six éléments restent sur une seule ligne horizontale et se réduisent pour s'adapter au conteneur au lieu de passer à la ligne suivante :

Exemple de la propriété flex-flow avec les valeurs « row-reverse » et « nowrap » :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: row-reverse nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété flex-flow avec les valeurs « column » et « nowrap » :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: column nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété flex-flow avec les valeurs « column-reverse » et « nowrap » :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-flow: column-reverse nowrap;
      }
      .example div {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-flow property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #cccccc;">C</div>
      <div style="background-color: #666666;">D</div>
      <div style="background-color: #4c4a4a;">E</div>
      <div style="background-color: #c6c4c4;">F</div>
    </div>
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description	Essayer
flex-direction	Définit la direction des éléments flexibles. Les valeurs possibles sont : row row-reverse column column-reverse initial inherit	Essayer »
flex-wrap	Définit si les éléments flexibles doivent passer à la ligne ou non. Les valeurs possibles sont : nowrap wrap wrap-reverse initial inherit	Essayer »
initial	Fait utiliser à la propriété sa valeur par défaut.	Essayer »
inherit	Hérite la propriété de son élément parent.

Quand utiliser flex-flow

Utilisez flex-flow lorsque vous avez besoin de définir à la fois la direction et le comportement de retour à la ligne d'un conteneur flex. Un modèle courant est une barre d'éléments responsive qui doit s'afficher en ligne sur les grands écrans, mais passer sur plusieurs lignes sur les petits — flex-flow: row wrap; gère cela en une seule déclaration. Si vous ne modifiez qu'une seule des deux sous-propriétés, utiliser directement flex-direction ou flex-wrap peut rendre l'intention plus évidente. Pour une vue d'ensemble de la façon dont ces propriétés s'articulent, consultez le guide ultime de Flexbox.

Exercice

Pratique

Qu'est-ce qui est exact concernant la propriété 'flex-flow' en CSS ?

'flex-flow' est une propriété raccourcie pour les propriétés flex-direction et flex-wrap'flex-flow' vous permet de contrôler la direction des éléments flexiblesLa valeur par défaut de 'flex-flow' est row-reverse'flex-flow' ne peut avoir qu'une seule valeur à la foisLa première valeur spécifiée dans 'flex-flow' est flex-direction et la seconde est flex-wrap