Name show that flexes box means flexible and box .it is a one-proportional layout way for adding out items in rows and columns. It is a good method to line up items into a container. Flex box layout is a proper substitute of float layout
Flex-directions: ( property related to container not for items.)
Flex-directions have four values
- row
- row-reverse
- column
- column-reverse
Flex-direction: row
Row is a default value if you use or not use them not having any impact, Order of items in row direction is Left to Right.
Example:
<style>
.container {
height: 100px;
width: 40%;
border: 1px solid black;
margin: auto;
background-color: burlywood;
display: flex;
flex-direction: row;
}
.item {
height: 50px;
width: 20%;
margin-top: 20px;
font-size: 40px;
color:black;
text-align: center;
}
.item1 {background-color:green;}
.item2 {background-color: magenta;}
.item3 {background-color:cyan}
</style>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>Flex-direction: (row-reverse)
The direction of row-reverse is opposite of row value – the order of items of is Right to Left.
Example:
<style>
.container {
height: 100px;
width: 40%;
border: 1px solid black;
margin: auto;
background-color: burlywood;
display: flex;
flex-direction: row-reverse;
}
.item {
height: 50px;
width: 20%;
margin-top: 20px;
font-size: 40px;
color:black;
text-align: center;
}
.item1 {background-color:yellow;}
.item2 {background-color: rgb(107, 24, 107);}
.item3 {background-color:lightgreen}
</style>
<body>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
</div>
</body>Flex-direction: (Column)
The working of column is vertically. Order of items is top to bottom.
Example:
<style>
.container {
width: 40%;
border: 1px solid black;
margin: auto;
background-color: lightskyblue;
display: flex;
flex-direction: column;
}
.item {
height: 50px;
font-size: 40px;
color:black;
text-align: center;
}
.item1 {background-color:yellow;}
.item2 {background-color: rgb(107, 24, 107);}
.item3 {background-color:lightgreen}
</style>
<body>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
</div>
</body>Flex-direction: (column-reverse)
Same as column but order of items work bottom to top.
Example:
<style>
.container {
width: 40%;
border: 1px solid black;
margin: auto;
background-color: lightskyblue;
display: flex;
flex-direction: column-reverse;
}
.item {
height: 50px;
font-size: 40px;
color:black;
text-align: center;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
</style>
<body>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
</div>
</body>Flex-wrap & flex-flow:
Flex- wrap
If data overflow from container then we use wrap property to maintain data.
Values
- Nowrap
- wrap
- wrap-reverse
<style>
.container {
width: 40%;
border: 1px solid black;
margin: auto;
margin-top: 100px;
background-color: lightskyblue;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
height: 50px;
font-size: 40px;
color:black;
text-align: center;
margin: 5px;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:maroon}
.item6 {background-color:darkorange}
.item7 {background-color:slategrey}
.item8 {background-color:palevioletred}
.item9 {background-color:lightgreen}
</style>
<body>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
<div class="item item6">E</div>
<div class="item item7">F</div>
<div class="item item8">G</div>
<div class="item item9">H</div>
</div>
</body>Nowrap
Default data overflow. Second thing if we use flex-direction: column property with warp then data show in column where the column ends they move to next column instead of going out container.
Example:
<style>
.container {
width: 40%;
border: 1px solid black;
margin: auto;
margin-top: 100px;
background-color: lightskyblue;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.item {
height: 50px;
font-size: 40px;
color:black;
text-align: center;
margin: 5px;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:maroon}
.item6 {background-color:darkorange}
.item7 {background-color:slategrey}
.item8 {background-color:palevioletred}
.item9 {background-color:lightgreen}
</style>
<body>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
<div class="item item6">E</div>
<div class="item item7">F</div>
<div class="item item8">G</div>
<div class="item item9">H</div>
</div>
</body>Flex-reverse
Wrap-reverse; in this value items start of Right side of container. Like as we use flexi-direction row with flex-wrap: wrap-reverse then order of items show bottom to top. Same we do with column.
Example:
<style>
.container {
width: 40%;
height: 200px;
border: 1px solid black;
margin: auto;
margin-top: 60px;
background-color: lightskyblue;
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
}
.item {
height: 50px;
font-size: 40px;
color:black;
text-align: center;
margin: 5px;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:maroon}
.item6 {background-color:darkorange}
.item7 {background-color:slategrey}
.item8 {background-color:palevioletred}
.item9 {background-color:lightgreen}
</style>
<body>
<h2 style="text-align: center;" > wrap-reverse</h2>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
<div class="item item6">E</div>
<div class="item item7">F</div>
<div class="item item8">G</div>
<div class="item item9">H</div>
</div>
</body>Wrap
If we use wrap value then our data not overflow.Where the space is end he will come on next line instead of going out of border.
Example:
<style>
.container {
width: 40%;
border: 1px solid black;
margin: auto;
margin-top: 100px;
background-color: lightskyblue;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
height: 50px;
font-size: 40px;
color:black;
text-align: center;
margin: 5px;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:maroon}
.item6 {background-color:darkorange}
.item7 {background-color:slategrey}
.item8 {background-color:palevioletred}
.item9 {background-color:lightgreen}
</style>
<body>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
<div class="item item6">E</div>
<div class="item item7">F</div>
<div class="item item8">G</div>
<div class="item item9">H</div>
</div>
</body>Flex-flow
Flex-flow is short hand of flex-direction and flex-wrap; if we want to use both of them together we do this with flex-flow property. Like flex-flow: column wrap-reverse’
Example:
<style>
.container {
width: 40%;
height: 200px;
border: 1px solid black;
margin: auto;
margin-top: 30px;
background-color: lightskyblue;
display: flex;
flex-flow: row wrap-reverse;
}
.item {
height: 50px;
font-size: 40px;
color:black;
text-align: center;
margin: 5px;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:maroon}
.item6 {background-color:darkorange}
.item7 {background-color:slategrey}
.item8 {background-color:palevioletred}
.item9 {background-color:lightgreen}
</style>
<body>
<h2 style="text-align: center;" > flex flow </h2>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
<div class="item item6">E</div>
<div class="item item7">F</div>
<div class="item item8">G</div>
<div class="item item9">H</div>
</div>
</body>Justify-Content
Horizontal alignment
Values
- flex-start
- flex-end
- center
- space-around
- space-between,
- space-evenly
Center
All data in centralized.
Example:
<style>
.container {
width: 60%;
border: 1px solid black;
margin: auto;
margin-top: 20px;
background-color: lightskyblue;
display: flex;
justify-content: flex-end;
}
.item {
height: 40px;
font-size: 40px;
color:black;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:maroon}
</style>
<body>
<h2 style="text-align: center;" > Justify-Content <br> End</h2>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
</div>
</body> Flex- end
All items go right corner.
Example:
<style>
.container {
width: 60%;
border: 1px solid black;
margin: auto;
margin-top: 20px;
background-color: lightskyblue;
display: flex;
justify-content: flex-end;
}
.item {
height: 40px;
font-size: 40px;
color:black;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:maroon}
</style>
<body>
<h2 style="text-align: center;" > Justify-Content <br> End</h2>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
</div>
</body>Flex-start
By default items start from left. If we not use they have no impact on items.
Example:
<style>
.container {
width: 60%;
border: 1px solid black;
margin: auto;
margin-top: 20px;
background-color: lightskyblue;
display: flex;
justify-content: flex-start;
}
.item {
height: 40px;
font-size: 40px;
color:black;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:maroon}
</style>
<body>
<h2 style="text-align: center;" > Justify-Content <br> Start</h2>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
</div>
</body>Space-between
In this value first and last items of container connect with own side and inner items holds . the remaining space of container equally .
Example:
<style>
.container {
width: 60%;
border: 1px solid black;
margin: auto;
margin-top: 20px;
background-color: lightskyblue;
display: flex;
justify-content: space-between;
height: 40px;
font-size: 40px;
color:black;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:maroon}
</style>
<body>
<h2 style="text-align: center;" > Justify-Content <br>Space-between</h2>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
</div>
</body>
Space-around
In space-around value first and list items holds the same width and inner items holds double of this because every items contain same width on left and right
Example:
<style>
.container {
width: 60%;
border: 1px solid black;
margin: auto;
margin-top: 20px;
background-color: lightskyblue;
display: flex;
justify-content: space-around;
height: 40px;
font-size: 40px;
color:black;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:rgb(233, 236, 10)}
</style>
<body>
<h2 style="text-align: center;" > Justify-Content <br>Space-around</h2>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
</div>
</body>Space-evenly
Every items holds same space horizontally.
Example:
<style>
.container {
width: 60%;
border: 1px solid black;
margin: auto;
margin-top: 20px;
background-color: lightskyblue;
display: flex;
justify-content: space-evenly;
height: 40px;
font-size: 40px;
color:black;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:rgb(233, 236, 10)}
</style>
<body>
<h2 style="text-align: center;" > Justify-Content <br>Space-evenly</h2>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
</div>
</body>
Align-items
Align-items work on both directions horizontally and vertically.
Values
- flex-start
- flex-end
- Stretch
By default items
Flex-start
Vertically alignment on top.
Example:
<style>
.container {
width: 60%;
height: 300px;
border: 1px solid black;
background-color: khaki;
display: flex;
padding: 5px;
font-size: 30px;
align-items: flex-start;
}
.item{
margin: 4px;
width: 10%;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:rgb(233, 236, 10)}
</style>
<body>
<h2 style="text-align: center;" > Align-Items</h2>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
</div>
</body>
Flex-end
Vertically alignment on bottom end with base.
Example:
<style>
.container {
width: 60%;
height: 300px;
border: 1px solid black;
background-color: khaki;
display: flex;
padding: 5px;
font-size: 30px;
align-items: flex-end;
}
.item{
margin: 4px;
width: 10%;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:rgb(233, 236, 10)}
</style>
<body>
<h2 style="text-align: center;" > Align-Items</h2>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
</div>
</body>Center
Items in center.
Example:
<style>
.container {
width: 60%;
height: 300px;
border: 1px solid black;
background-color: khaki;
display: flex;
padding: 5px;
font-size: 30px;
align-items: center;
}
.item{
margin: 4px;
width: 10%;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:rgb(233, 236, 10)}
</style>
<body>
<h2 style="text-align: center;" > Align-Items</h2>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
</div>
</body>Baseline
Baseline set the alignment from the bottom of text may be text have different fonts size .
Example:
<style>
.container {
width: 60%;
height: 300px;
border: 1px solid black;
background-color: khaki;
display: flex;
padding: 5px;
font-size: 30px;
align-items: baseline;
}
.item{
margin: 4px;
width: 10%;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink;height:50px;}
.item5 {background-color:rgb(233, 236, 10); height: 78px;}
</style>
<body>
<h2 style="text-align: center;" > Align-Items</h2>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
</div>
</body>Order
By using order property we can order of items/dives. For this individually we go classes and use order property
By default order is 0 if we use -1 means them more worth instead of 0. Mostly we use order when are making responsive websites.
Example:
<style>
.container {
width: 60%;
border: 2px solid black;
background-color: khaki;
display: flex;
padding: 5px;
font-size: 30px;
}
.item{
margin: 4px;
width: 10%;
border: 1px solid black;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen; order: -1;}
.item4 {background-color:hotpink;}
.item5 {background-color:rgb(233, 236, 10); order: -2;}
</style>
<body>
<h2 style="text-align: center;" > Align-Items</h2>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</body>Flex-grow
Firstly flex-grow property only work on items not on container. By using this we can increase the width of individual items in group;
Like flex-grow: 2; means these particular items hold the space of double of normal items
Example:
<style>
.container {
width: 60%;
border: 2px solid black;
background-color: rgb(116, 114, 96);
display: flex;
padding: 5px;
font-size: 30px;
}
.item{
width: 10%;
border: 1px solid black;
text-align: center;
flex-grow: 2;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen; order: -1;}
.item4 {background-color:hotpink;}
.item5 {background-color:rgb(233, 236, 10); order: -2;}
</style>
<body>
<h2 style="text-align: center;" > Align-Items</h2>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</body>
Flex-shrink
Property determine how the inside items of container will be shrink according to need we use 0 1 for this o not shrinkable and 1 is not shrinkable
We can use other integers instead of 0 and 1.
Example:
<style>
.container {
width: 60%;
border: 2px solid black;
background-color: rgb(116, 114, 96);
display: flex;
padding: 5px;
font-size: 30px;
}
.item{
width: 200px;
border: 1px solid black;
text-align: center;
}
.item1 {background-color:rgb(238, 113, 113);flex-shrink: 0; }
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen;}
.item4 {background-color:hotpink;}
.item5 {background-color:rgb(37, 133, 223); }
</style>
<body>
<h2 style="text-align: center;" > Flex-Shrink</h2>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</body>Flex-flow
Flex-flow is short hand of flex-direction and flex-wrap; if we want to use both of them together we do this with flex-flow property. Like flex-flow: column wrap-reverse’
Example:
<style>
.container {
width: 40%;
height: 200px;
border: 1px solid black;
margin: auto;
margin-top: 30px;
background-color: lightskyblue;
display: flex;
flex-flow: row wrap-reverse;
}
.item {
height: 50px;
font-size: 40px;
color:black;
text-align: center;
margin: 5px;
}
.item1 {background-color:rgb(238, 113, 113);}
.item2 {background-color: rgb(127, 73, 197);}
.item3 {background-color:lightgreen}
.item4 {background-color:hotpink}
.item5 {background-color:maroon}
.item6 {background-color:darkorange}
.item7 {background-color:slategrey}
.item8 {background-color:palevioletred}
.item9 {background-color:lightgreen}
</style>
<body>
<h2 style="text-align: center;" > flex flow </h2>
<div class="container">
<div class="item item1">A</div>
<div class="item item2">B</div>
<div class="item item3">C</div>
<div class="item item4">E</div>
<div class="item item5">D</div>
<div class="item item6">E</div>
<div class="item item7">F</div>
<div class="item item8">G</div>
<div class="item item9">H</div>
</div>
</body>
Comments
The Top 4 (REAL) Cryptotrading Platforms – No Scams Allowed!