Flex-Wrap property specified the whether the flex item forced into single line or multiple line. If wrapping is allowed it also have option control the direction.
If you have the box like 50px width and 50px height you placed the list of boxes in the 200px width container you want to wrap the 50px box to after reach the 200px to new line or in single line by using the flex-wrap CSS property.
Flex-Wrap have three different value.
Wrap = it will force the item to multiple line.
Nowrap = it will force the item in single line.
Wrap-reverse= it will force the item to reserve direction. If item 1,2,3 you use this property the item will arrange in the reverse 3,2,1.
Syntax:
flex-wrap: nowrap; /* Default Value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* Global values */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: unset;
Example: Wrap
Code:
</div>
<style>
.pwdiv {
width: 200px;
height: 150px;
border: 2px solid red;
display: flex;
flex-wrap: wrap;
}
.cdiv {
width: 50px;
height: 50px;
margin: 0 5px 5px;
border: 2px solid blue;
}
</style>
<div class="pwdiv">
<div class="cdiv">
1
</div>
<div class="cdiv">
2
</div>
<div class="cdiv">
3
</div>
<div class="cdiv">
4
</div>
<div class="cdiv">
5
</div>
<div class="cdiv">
6
</div>
<div class="cdiv">
7
</div>
<div class="cdiv">
8
</div>
1
2
3
4
5
6
7
8
Example: nowrap
<style>
.pnwdiv {
width: 200px;
height: 150px;
border: 2px solid red;
display: flex;
flex-wrap: nowrap;
}
.cdiv {
width: 50px;
height: 50px;
margin: 0 5px 5px;
border: 2px solid blue;
}
</style>
<div class="pnwdiv">
<div class="cdiv">
1
</div>
<div class="cdiv">
2
</div>
<div class="cdiv">
3
</div>
<div class="cdiv">
4
</div>
<div class="cdiv">
5
</div>
<div class="cdiv">
6
</div>
<div class="cdiv">
7
</div>
<div class="cdiv">
8
</div>
</div>
1
2
3
4
5
6
7
8
Example: Wrap-Reverse
Code:
<style>
.pwrdiv {
width: 200px;
height: 150px;
border: 2px solid red;
display: flex;
flex-wrap: wrap-reverse;
}
.cdiv {
width: 50px;
height: 50px;
margin: 0 5px 5px;
border: 2px solid blue;
}
</style>
<div class="pwrdiv">
<div class="cdiv">
1
</div>
<div class="cdiv">
2
</div>
<div class="cdiv">
3
</div>
<div class="cdiv">
4
</div>
<div class="cdiv">
5
</div>
<div class="cdiv">
6
</div>
<div class="cdiv">
7
</div>
<div class="cdiv">
8
</div>
</div>
1
2
3
4
5
6
7
8
| Feature | Chrome | Edge | Firefox | IE | Opera | Safari | Android | iOS |
|---|---|---|---|---|---|---|---|---|
| Basic support | 29+ | 12 | 28+ | 11+ | 17+ | 9+ | All | ALL |
