La propriété flex-flow regroupe flex-direction et flex-wrap :
.container {
flex-flow: row wrap;
}
Et ainsi les définir en une seule fois.
Remarque :
Pour tester l'impact des directions et du wrap, ajoutez des tailles explicites (en largeur si l’axe principal est horizontal ou en hauteur si l’axe principal est vertical) à vos éléments et modifiez votre propriété flex-flow.
Exemple :
flex-flow: row wrap;
Défini un conteneur flexible dont l’axe principal est l’axe physique horizontal et le contenu s’écoule de gauche à droite. Avec wrap, les éléments qui dépassent vont venir se placer sous les premiers (les lignes vont s’empiler du haut vers le bas).
flex-flow: column wrap;
Défini un conteneur flexible dont l’axe principal est l’axe physique vertical et le contenu s’écoule de haut en bas. Avec wrap, les éléments qui dépassent vont venir se placer à droite des premiers (les lignes vont s’empiler de la gauche vers la droite).