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.
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: column wrap-reverse;
flex-flow: column 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>
</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
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: <'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
Voir flex-direction et flex-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éfinir column-reverse et wrap
Dans cet exemple, l'axe principal est l'axe de bloc avec un main-start et un main-end inversés. Les éléments flexibles peuvent passer à la ligne, créant de nouvelles lignes si besoin.
css
.container {
flex-flow: column-reverse wrap;
}
Spécifications
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-flow-property |