By default, Flexbox tries to fit all items in one line.
When there is not enough space, items shrink instead of moving to a new line.
The flex-wrap property controls whether items stay in one line or move to the next line.
This is very useful for building responsive layouts.
With nowrap, all items stay in one row.
If the container is smaller than the total width of items, they will shrink to fit.
With wrap, items move to the next line when there is no more space.
This makes layouts flexible and mobile friendly.
This is how image galleries and card grids are built.
Flex-wrap allows items to automatically adjust to different screen sizes.
Flex wrap values you should know
- nowrap keeps all items in one line
- wrap moves items to the next line
- wrap-reverse moves items to the next line in reverse order
Wrap-reverse changes the direction of wrapped lines.
This is rarely used but good to know for advanced layouts.
Practice task
Create a flex container and:
- Add four boxes
- Try flex-wrap nowrap
- Change it to wrap
- Then try wrap-reverse
- Resize the container and observe the changes
Next lesson
In the next page, you will learn about align-content and how to align multiple rows in a flex container.