flex-flow

Combinació abreujada de flex-direction i flex-wrap. Permet definir en una sola línia l’orientació i si els elements poden ocupar diverses línies.
flex-flow: row wrap
1
2
3
4
5
Els elements es col·loquen en fila i poden passar a una segona línia.
flex-flow: column wrap
1
2
3
4
5
Els elements baixen en columna i després passen a una columna nova.
flex-flow: row nowrap (per defecte)
1
2
3
4
5
Tots els elements romanen en una sola fila encara que no capen.
flex-flow: row-reverse wrap
1
2
3
4
5
Els elements apareixen en fila invertida i poden baixar a una segona línia.
En resum:

• flex-flow combina direction + wrap.
• Et permet definir orientació i envoltament en una sola línia.
• row wrap: el cas més habitual en dissenys adaptatius.
• row nowrap: comportament per defecte (tot en una línia).
• column wrap: apila en columnes noves quan cal.