Currently Empty: ₹0.00
CSS Flex Wrap
CSS CODES & EXAMPLES
CSS Flex Wrap
Learn how the CSS flex-wrap property controls whether flex items stay on one line or move onto multiple lines when there is not enough available space.
01
What is Flex Wrap?
Control whether flex items wrap onto new lines
By default, Flexbox tries to keep all flex items on a single
line. The flex-wrap property allows items to move
onto additional rows or columns when the available space is
not sufficient.
nowrap
All items remain on one line.
wrap
Items move onto additional lines when necessary.
wrap-reverse
Items wrap in the reverse cross-axis direction.
02
flex-wrap: nowrap
The default value
The default value is nowrap. Flex items remain
on a single line even when the container becomes smaller.
flex-nowrap.css
.container {
display: flex;
flex-wrap: nowrap;
}ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
Note:
With
nowrap, the items try to stay on one line.03
flex-wrap: wrap
Allow items to move to new lines
The wrap value allows flex items to move onto
multiple lines when there is not enough space.
flex-wrap.css
.container {
display: flex;
flex-wrap: wrap;
}ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
ITEM 7
ITEM 8
04
flex-wrap: wrap-reverse
Reverse the wrapping direction
The wrap-reverse value allows items to wrap,
but the new lines are placed in the reverse cross-axis
direction.
wrap-reverse.css
.container {
display: flex;
flex-wrap: wrap-reverse;
}1
2
3
4
5
6
05
Flex Wrap Values
Quick visual comparison
nowrap
1
2
3
4
One line
wrap
1
2
3
4
Multiple lines
wrap-reverse
1
2
3
4
Reverse wrapping
06
Flex Wrap with Gap
Create clean spacing between wrapped items
Combining flex-wrap with gap is a
common technique for creating responsive layouts.
responsive-grid.css
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}HTML
CSS
JavaScript
PHP
Python
SQL
07
Flex Wrap with flex-basis
Control the starting size of flex items
flex-basis defines the initial size of a flex
item before remaining space is distributed.
flex-basis.css
.item {
flex: 1 1 220px;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}220px BASE
220px BASE
220px BASE
220px BASE
08
Responsive Card Layout
A practical website exampleFlex wrapping is especially useful for responsive cards. Cards can automatically move to another row when the screen becomes smaller.
HTML Course
Learn page structure and semantic HTML.
Learn More →CSS Course
Learn layouts, styling and responsive design.
Learn More →JavaScript
Learn programming and interactive websites.
Learn More →Web Design
Build professional and responsive websites.
Learn More →09
Flex Direction + Flex Wrap
Use both properties togetherdirection-wrap.css
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
}1
2
3
4
5
6
10
Flex Wrap Quick Reference
Important values at a glance| Value | Meaning | Result |
|---|---|---|
nowrap | Keep items on one line | Single line |
wrap | Allow items to wrap | Multiple lines |
wrap-reverse | Reverse the wrapping direction | Reverse cross-axis lines |
11
Practice Task
Build a responsive Flexbox grid🎯 Create a Six-Card Layout
Create six cards and make them responsive using Flexbox. The cards should automatically move onto new rows when the available width becomes smaller.
-
Use
display: flex; -
Use
flex-wrap: wrap; -
Add
gap: 20px; -
Give each card a suitable
flex-basis. - Test the layout on mobile and desktop screens.
12
CSS Flex Wrap Live Example
Run the practical exampleLIVE PREVIEW