CSS: flex-wrap

flex-wrap

flex-wrap property controls whether flex items are forced into a single line or allowed to wrap onto multiple lines within a flex container.

flex-wrap: nowrap

The default. Items remain in a single line and may overflow the container.

1

2

3

4

5

6

flex-wrap: wrap

Items break into multiple lines, stacking in the direction defined by flex-direction.

1

2

3

4

5

6

flex-wrap: wrap-reverse

Items wrap into multiple lines but stack in the opposite direction of flex-direction.

1

2

3

4

5

6