flex-wrap

Definition

A flexbox container property that specifies whether flex items are forced onto one line or can wrap onto multiple lines.

Explain Like I'm New

By default, Flexbox is stubborn. If you put 10 boxes into a container, it will squeeze and crush them until they fit on a single line. Setting `flex-wrap: wrap` tells the browser: 'If there isn't enough room, it's okay, drop the extra boxes down to a new row'.

Real World Example

An image gallery. You want 4 images per row on a Desktop, but on a Mobile phone, they should automatically wrap to form 1 image per row.

Common Use Cases

•Grid-like photo galleries
•Responsive lists of cards that stack on mobile

Interactive Example

Interview Questions

basic

What is the default value of `flex-wrap`?

intermediate

If items wrap to a second line, how do you control the vertical space between the two lines?

Flash Cards

Question

Default value?

Click to reveal answer

Answer

`nowrap`. Items will shrink infinitely to stay on one line.

Question

Space between lines?

Click to reveal answer

Answer

You can use `gap: 20px;` on the flex container, which creates a grid-like gutter between both columns AND rows.