CSS Flex Wrap
The CSS flex-wrap property controls whether Flex Items should remain on one line or move onto multiple lines when there is not enough space.
Flexbox normally tries to keep all items on a single line. Using flex-wrap, we can allow the items to move to another line.
Syntax
.container {
display: flex;
flex-wrap: value;
}The value determines whether the Flex Items are allowed to wrap onto multiple lines.
Values of flex-wrap
| Value | Description |
|---|---|
| nowrap | Keeps all Flex Items on a single line. |
| wrap | Allows Flex Items to move onto multiple lines. |
| wrap-reverse | Allows wrapping, but places the additional lines in the reverse cross-axis direction. |
Flex Wrap Diagram
When the available width becomes smaller, Flex Items can move to another line.
1. flex-wrap: nowrap
nowrap is the default value. It keeps the Flex Items on a single line.
.container {
display: flex;
flex-wrap: nowrap;
}With nowrap, Flexbox does not create additional lines for the Flex Items.
If the items require more space than the container has available, the items may shrink or overflow depending on the other Flexbox properties being used.
2. flex-wrap: wrap
The wrap value allows Flex Items to move onto another line when the available space is insufficient.
.container {
display: flex;
flex-wrap: wrap;
}Output
3. flex-wrap: wrap-reverse
The wrap-reverse value allows items to wrap, but the wrapped lines are placed in the reverse cross-axis direction.
.container {
display: flex;
flex-wrap: wrap-reverse;
}The items still wrap when there is not enough horizontal space.
The difference is that the additional flex lines are placed in the opposite direction of the cross axis.
Practical Example: Course Cards
Suppose a training website displays several course cards. On a large screen, several cards may fit in one row. On a smaller screen, the cards can move to the next row.
.courses {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.course {
flex: 1 1 200px;
}display: flex; creates the Flex Container.
flex-wrap: wrap; allows the course cards to move to another line.
gap: 15px; creates space between the cards.
flex: 1 1 200px; allows each course card to flex while maintaining an initial size of approximately 200 pixels.
nowrap vs wrap
| Feature | nowrap | wrap |
|---|---|---|
| Multiple Lines | No | Yes |
| Responsive Layout | Limited | More Flexible |
| Default Value | Yes | No |
Summary
The flex-wrap property controls whether Flex Items stay on one line or move onto multiple lines. Its main values are nowrap, wrap, and wrap-reverse. The default value is nowrap. The wrap value is especially useful when creating flexible layouts containing multiple cards or components.