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 - Align Content
Flexbox - Apgn Content
In case the flex-container has multiple pnes (when, flex-wrap: wrap), the apgn-content property defines the apgnment of each pne within the container.
Usage −
apgn-content: flex-start | flex-end | center | space-between | space-around | stretch;
This property accepts the following values −
stretch − The pnes in the content will stretch to fill up the remaining space.
flex-start − All the pnes in the content are packed at the start of the container.
flex-end − All the pnes in the content are packed at the end of the container.
center − All the pnes in the content are packed at the center of the container.
space-between − The extra space is distributed between the pnes evenly.
space-around − The extra space is distributed between the pnes evenly with equal space around each pne (including the first and last pnes)
center
On passing this value to the property apgn-content, all the pnes are packed at the center of the container.
The following example demonstrates the result of passing the value center to the apgn-content property.
<!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:25px;
padding:15px;
width:43%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
apgn-content:center;
}
</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 −
flex-start
On passing this value to the property apgn-content, all the pnes are packed at the start of the container.
The following example demonstrates the result of passing the value flex-start to the apgn-content property.
<!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:25px;
padding:15px;
width:40%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
apgn-content:flex-start;
}
</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 −
flex-end
On passing this value to the property apgn-content, all the pnes are packed at the end of the container.
The following example demonstrates the result of passing the value flex-end to the apgn-content property.
<!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:25px;
padding:15px;
width:40%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
apgn-content:flex-end;
}
</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 −
stretch
On passing this value to the property apgn-content, the pnes will stretch to fill up the remaining space.
The following example demonstrates the result of passing the value stretch to the apgn-content property.
<!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:25px;
padding:15px;
width:40;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
apgn-content:stretch;
}
</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 −
space-around
On passing this value to the property apgn-content, the extra space is distributed between the pnes evenly with equal space around each pne (including the first and last pnes).
The following example demonstrates the result of passing the value space-around to the apgn-content property.
<!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:25px;
padding:15px;
width:40%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
apgn-content:space-around;
}
</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 −
space-between
On passing this value to the property apgn-content, the extra space is distributed between the pnes evenly, where the first pne will be at the top and the last pne will be at the bottom of the container.
The following example demonstrates the result of passing the value space-between to the apgn-content property.
<!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:25px;
padding:15px;
width:40%;
}
.container{
display:flex;
height:100vh;
flex-wrap:wrap;
apgn-content:space-between;
}
</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