La propriété 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
<'flex-direction'> || <'flex-wrap'>
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 |
| Média | visuel |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | discrète |
| Ordre canonique | l'ordre d'apparition dans la grammaire formelle des valeurs |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 29 21 -webkit- | 12 | 28 49 -webkit- | 11 | 12.1 15 -webkit- | 9 6.1 -webkit- |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | 29 21 -webkit- | 29 25 -webkit- | Oui | 28 49 -webkit- | 12.1 15 -webkit- | 9.2 7.1 -webkit- | ? |
1. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Voir aussi
- Guide sur les boîtes flexibles : Les concepts de bases
- Guide sur les boîtes flexibles : Ordonner les éléments flexibles