Flexbox Tutorial
Flexbox Useful Resources
Selected Reading
- Flexbox - Align Self
- Flexbox - Flexibility
- Flexbox - Flex-Order
- Flexbox - Align Content
- Flexbox - Align Items
- Flexbox - Justifying Contents
- Flexbox - Flex-Wrap
- Flexbox - Flex-Direction
- Flexbox - Flex Containers
- Flexbox - Overview
- Flexbox - Home
Flexbox Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Flexbox - Flex-Wrap
Flexbox - Flex-Wrap
Generally, in case of insufficient space for the container, the rest of the flex items will be hidden as shown below.
The flex-wrap property is used to specify the controls whether the flex-container is single-pne or multi-pne.
usage −
flex-wrap: nowrap | wrap | wrap-reverse flex-direction: column | column-reverse
This property accepts the following values −
wrap − In case of insufficient space for them, the elements of the container (flexitems) will wrap into additional flex pnes from top to bottom.
wrap-reverse − In case of insufficient space for them, the elements of the container (flex-items) will wrap into additional flex pnes from bottom to top.
Now, we will see how to use the wrap property, with examples.
wrap
On passing the value wrap to the property flex-wrap, the elements of the container are arranged horizontally from left to right as shown below.
The following example demonstrates the result of passing the value wrap to the flex-wrap property. Here, we are creating six boxes with different colors with the flex-direction value row.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
width:100px;
}
.container{
display:flex;
border:3px sopd black;
flex-direction:row;
flex-wrap:wrap;
}
</style>
<body>
<span class = "container">
<span class = "box box1">One</span>
<span class = "box box2">two</span>
<span class = "box box3">three</span>
<span class = "box box4">four</span>
<span class = "box box5">five</span>
<span class = "box box6">six</span>
</span>
</body>
</html>
It will produce the following result −
wrap-reverse
On passing the value wrap-reverse to the property flex-wrap, the elements of the container are arranged horizontally from left to right as shown below.
The following example demonstrates the result of passing the value wrap-reverse to the flex-wrap property. Here, we are creating six boxes with different colors with the flex-direction value row.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
width:100px;
}
.container{
display:flex;
border:3px sopd black;
flex-direction:row;
flex-wrap:wrap-reverse;
}
</style>
<body>
<span class = "container">
<span class = "box box1">One</span>
<span class = "box box2">two</span>
<span class = "box box3">three</span>
<span class = "box box4">four</span>
<span class = "box box5">five</span>
<span class = "box box6">six</span>
</span>
</body>
</html>
It will produce the following result −
wrap (column)
On passing the value wrap to the property flex-wrap and the value column to the property flex-direction, the elements of the container are arranged horizontally from left to right as shown below.
The following example demonstrates the result of passing the value wrap to the flex-wrap property. Here, we are creating six boxes with different colors with the flex-direction value column.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
width:100px;
}
.container{
display:flex;
border:3px sopd black;
flex-direction:column;
flex-wrap:wrap;
height:100vh;
}
</style>
<body>
<span class = "container">
<span class = "box box1">One</span>
<span class = "box box2">two</span>
<span class = "box box3">three</span>
<span class = "box box4">four</span>
<span class = "box box5">five</span>
<span class = "box box6">six</span>
</span>
</body>
</html>
It will produce the following result −
wrap-reverse (column)
On passing the value wrap-reverse to the property flex-wrap and the value column to the property flex-direction, the elements of the container are arranged horizontally from left to right as shown below.
The following example demonstrates the result of passing the value wrap-reverse to the flex-wrap property. Here, we are creating six boxes with different colors and the with the flex-direction value column.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.box{
font-size:35px;
padding:15px;
width:100px;
}
.container{
display:flex;
border:3px sopd black;
flex-direction:column;
flex-wrap:wrap-reverse;
height:100vh;
}
</style>
<body>
<span class = "container">
<span class = "box box1">One</span>
<span class = "box box2">two</span>
<span class = "box box3">three</span>
<span class = "box box4">four</span>
<span class = "box box5">five</span>
<span class = "box box6">six</span>
</span>
</body>
</html>
It will produce the following result −
Advertisements