La propriété CSS flex-flow
est une propriété raccourcie pour les propriétés flex-direction
et flex-wrap
.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.
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: unset;
Valeurs
Voir flex-direction
et flex-wrap
pour plus d'informations sur les valeurs que peuvent prendre ces deux propriétés.
Syntaxe formelle
Exemples
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
Spécification | État | Commentaires |
---|---|---|
CSS Flexible Box Layout Module La définition de 'flex-flow' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
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 | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Guide sur les boîtes flexibles : Les concepts de bases
- Guide sur les boîtes flexibles : Ordonner les éléments flexibles