Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
flex-flow
Baseline Widely available
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.
Lapropriété raccourcie [CSS](/fr/docs/Web/CSSflex-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: column wrap-reverse;flex-flow: column wrap;<section> <div> <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></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: 10px;}Propriétés constitutives
Cette propriété est une propriété abrégée pour les propriétés CSS suivantes :
Syntaxe
/* 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: <'flex-direction'> et <'flex-wrap'> */flex-flow: row nowrap;flex-flow: column wrap;flex-flow: column-reverse wrap-reverse;/* Valeurs globales */flex-flow: inherit;flex-flow: initial;flex-flow: revert;flex-flow: revert-layer;flex-flow: unset;Valeurs
Voirflex-direction etflex-wrap pour plus d'informations sur les valeurs que peuvent prendre ces deux propriétés.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | conteneurs flexibles |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
flex-flow =
<'flex-direction'>||
<'flex-wrap'>
<flex-direction> =
row|
row-reverse|
column|
column-reverse
<flex-wrap> =
nowrap|
wrap|
wrap-reverse
Exemples
Définircolumn-reverse etwrap
Dans cet exemple, l'axe principal est l'axe de bloc avec unmain-start et unmain-end inversés. Les éléments flexibles peuvent passer à la ligne, créant de nouvelles lignes si besoin.
.container { flex-flow: column-reverse wrap;}Spécifications
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-flow-property |