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é CSS flex-flow est une propriété raccourcie pour les propriétés flex-direction et flex-wrap.
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>Item One</div>
<div>Item Two</div>
<div>Item Three</div>
<div>Item Four</div>
<div>Item Five</div>
<div>Item Six</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
width: 80%;
max-height: 300px;
display: flex;
}
#example-element > div {
background-color: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
width: 60px;
margin: 10px;
}
Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.
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: 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
css
element {
/* L'axe principal sera la direction de bloc */
/* et on commencera par le bas (main-start et */
/* main-end inversés. Les éléments flexibles */
/* passent sur une nouvelle ligne si besoin */
flex-flow: column-reverse wrap;
}
Spécifications
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-flow-property |
Compatibilité des navigateurs
Voir aussi
- Guide sur les boîtes flexibles : Les concepts de bases
- Guide sur les boîtes flexibles : Ordonner les éléments flexibles