Propriété CSS `flex-flow`

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2015.

Voir la compatibilité complète
En savoir plus

La propriété raccourcie [CSS](/fr/docs/Web/CSS flex-flow) définit la direction d'un conteneur flexible ainsi que son comportement de retour à la ligne.

Exemple interactif

flex-flow: row wrap;

flex-flow: row-reverse nowrap;

flex-flow: row wrap balance;

flex-flow: column wrap-reverse;

flex-flow: column wrap;

flex-flow: column balance wrap;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>Élément Un</div>
    <div>Élément Deux</div>
    <div>Élément Trois</div>
    <div>Élément Quatre</div>
    <div>Élément Cinq</div>
    <div>Élément Six</div>
    <div>Élément Sept</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 80%;
  max-height: 300px;
  display: flex;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  width: 60px;
  margin: 5px 10px;
}

Propriétés constitutives

Cette propriété est une propriété abrégée pour les propriétés CSS suivantes :

Syntaxe

css

/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
flex-flow: wrap balance;
flex-flow: balance wrap-reverse;

/* flex-flow: <'flex-direction'> et <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
flex-flow: row-reverse balance wrap;

/* Valeurs globales */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: revert-layer;
flex-flow: unset;

Valeurs

Cette propriété est définie comme une liste de mots-clés séparés par des espaces des types suivants :

flex-direction: Un mot-clé définissant l'axe principal et la direction selon laquelle les éléments flexibles sont placés dans le conteneur flexible.
flex-wrap: Un ou deux mots-clés définissant si les éléments flexibles peuvent passer à plusieurs lignes et, si le retour à la ligne est autorisé, définissant la direction dans laquelle les lignes sont empilées et si elles sont équilibrées.

La propriété raccourcie flex-flow définit les propriétés flex-direction et flex-wrap, définissant la direction d'un conteneur flexible et son comportement de retour à la ligne. Elle peut également définir que les éléments flexibles soient équilibrés lorsque le retour à la ligne est autorisé.

Par exemple, column-reverse wrap définit l'axe principal dans la direction du bloc avec un main-start et un main-end inversés, les éléments flexibles étant autorisés à passer à la ligne, créant de nouvelles lignes si nécessaire.

css

.container {
  flex-flow: column-reverse wrap;
}

Pour distribuer les éléments flexibles de manière uniforme sur chaque ligne flexible, vous pouvez inclure le mot-clé flex-wrap balance en plus de wrap :

css

.container {
  flex-flow: column-reverse wrap balance;
}

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `flex-direction`: `row` `flex-wrap`: `nowrap`
Applicabilité	conteneurs flexibles
Héritée	non
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `flex-direction`: comme défini `flex-wrap`: comme défini
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `flex-direction`: discrète `flex-wrap`: discrète

Syntaxe formelle

flex-flow = 
  <'flex-direction'>  ||
  <'flex-wrap'>       

<flex-direction> = 
  row             |
  row-reverse     |
  column          |
  column-reverse  

<flex-wrap> = 
  nowrap                              |
  [ wrap | wrap-reverse ] || balance

Exemples

Utilisation simple

Cet exemple montre l'utilisation de la propriété raccourcie flex-flow sur un conteneur flexible afin que les éléments soient disposés à l'envers sur plusieurs lignes.

HTML

Nous incluons une liste de mots par ordre alphabétique :

html

<ul>
  <li>Alphabet</li>
  <li>Banane</li>
  <li>Crayons</li>
  <li>Dinosaures</li>
  <li>Éléphant</li>
  <li>Fondation</li>
  <li>Gribouillage</li>
  <li>Heureux</li>
  <li>Igloo</li>
  <li>Jouet</li>
  <li>Karting</li>
  <li>Librairie</li>
  <li>Magie</li>
  <li>Nez</li>
  <li>Orange</li>
  <li>Pétunia</li>
  <li>Qualité</li>
  <li>Racine</li>
  <li>Soleil</li>
  <li>Tricycle</li>
  <li>Univers</li>
  <li>Valentine</li>
  <li>Wagon</li>
  <li>Xylophone</li>
</ul>

CSS

Nous définissons le <ul> comme un conteneur flexible avec la propriété display, définissons une largeur (width), ajoutons une gouttière (gap) afin qu'il y ait un peu d'espace entre les éléments flexibles et les lignes flexibles, puis définissons le flex-flow pour envelopper les éléments dans l'ordre inverse. CSS supplémentaire a été masqué pour plus de concision.

css

ul {
  display: flex;
  width: 31em;
  gap: 1em;

  flex-flow: row-reverse wrap-reverse;
}

ul {
  list-style: none;
  border: 1px solid;
  font-family: sans-serif;
}
li {
  font-size: 1.25rem;
  padding: 5px;
  border: 1px solid;
  background-color: lightpink;
}
li:nth-of-type(even) {
  background-color: lightgreen;
}