flex-flow
Raccourci qui réunit flex-direction et flex-wrap en une seule déclaration.
- Valeur initiale
row nowrap- Héritée
- Non
- Animable
- non
- S’applique à
- conteneurs flex
- JavaScript
element.style.flexFlow = "row wrap"
Exemple
#.gallery {
display: flex;
flex-flow: row wrap;
gap: 8px;
}<div class="gallery stage">
<div class="box" style="width: 30%">1</div><div class="box" style="width: 30%">2</div>
<div class="box" style="width: 30%">3</div><div class="box" style="width: 30%">4</div>
</div>Définition et utilisation
#La propriété flex-flow règle en une fois le sens de l’axe principal (flex-direction) et le retour à la ligne (flex-wrap). Vous pouvez donner les valeurs dans n’importe quel ordre, et celle que vous omettez reçoit sa valeur par défaut.
L’écriture flex-flow: row wrap est l’usage le plus courant : des éléments en ligne, qui passent à une nouvelle ligne quand il faut. Elle est plus courte, mais moins lisible pour les débutants, donc dans de nombreux projets on écrit tout de même les deux propriétés séparément.
Comme tout raccourci, flex-flow réécrit les deux propriétés qui le composent, y compris celles définies plus haut dans d’autres règles.
Syntaxe
#flex-flow: <flex-direction> || <flex-wrap>;Valeurs
#- Valeur par défaut : une seule ligne, sans retour à la ligne.
- Ligne avec retour à la ligne.
- Colonne seule, le retour à la ligne reste sur sa valeur par défaut.
- Ligne inversée avec retour à la ligne.
Valeurs en pratique
#row nowrap
.demo { flex-flow: row nowrap; }row wrap
.demo { flex-flow: row wrap; }column
.demo { flex-flow: column; }row-reverse wrap
.demo { flex-flow: row-reverse wrap; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Si l’équipe ne connaît pas bien Flexbox, écrivez
flex-directionetflex-wrapséparément. Le code sera plus lisible. - Le raccourci réécrit les deux propriétés à la fois, faites donc attention à l’ordre des règles dans la feuille de style.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.