FLEXBOX:
According to the specification, the Flexbox model provides for an efficient way to layout, align, and distribute space among elements within your document even when the viewport and the size of your elements is dynamic or unknown.
FLEX-DIRECTION:
The flex-direction property is a sub-property of the Flexible Box Layout module. It establishes the main-axis, thus defining the direction flex items are placed in the flex container. It also defines whether items are normal or reversed.
flex-direction : row;
The flexbox items are ordered the same way as the text direction, along the main axis.
flex-direction : row-reverse;
The flexbox items are ordered the opposite way as the text direction, along the main axis.
flex-direction : column;
The flexbox items are ordered the same way as the text direction, along the cross axis.
flex-direction : column-reverse;
The flexbox items are ordered the opposite way as the text direction, along the cross axis.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FLEX-DIRECTION</title>
<style>
body{
margin: 0;
padding: 0;
}
.main{
border: 2px solid red;
height: 100px;
width: 500px;
margin: 10px;
display:flex ;
flex-direction: row;
}
.main1{
border: 2px solid rgb(255, 183, 0);
height: 100px;
width: 500px;
margin: 10px;
display:flex ;
flex-direction: row-reverse;
}
.main2{
border: 2px solid rgb(98, 255, 0);
height: 210px;
width: 500px;
margin: 5px;
display:flex ;
flex-direction: column;
}
.main3{
border: 2px solid rgb(81, 0, 255);
height: 210px;
width: 500px;
margin: 5px;
display:flex ;
flex-direction: column-reverse;
}
.box{
border: 2px solid black;
background-color: aqua;
border-radius: 10px;
height: 10px;
width: 10px;
text-align: center;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main1">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main2">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main3">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</body>
</html>
OUTPUT
FLEX-WRAP:
Defines if flexbox items appear on a single line or on multiple lines within a flexbox container.
flex-wrap: nowrap;
The flexbox items will remain on a single line, no matter what, and will eventually overflow if needed.
flex-wrap: wrap;
The flexbox items will be distributed among multiple lines if needed.
flex-wrap: wrap-reverse;
The flexbox items will be distributed among multiple lines if needed. Any additional line will appear before the previous one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FLEXWRAP</title>
<style>
body{
margin: 0;
padding: 0;
}
.main{
border: 2px dashed black;
height: 200px;
width: 200px;
margin: 10px;
display: flex;
flex-wrap: nowrap;
}
.main1{
border: 2px solid red;
height: 200px;
width: 200px;
margin: 10px;
display:flex ;
flex-wrap: wrap;
}
.main2{
border: 2px solid rgb(17, 0, 255);
height: 200px;
width: 200px;
margin: 10px;
display: flex;
flex-wrap: wrap-reverse;
}
.box{
border: 2x solid black;
border-radius: 10px;
margin: 5px;
padding: 5px;
background-color: rgb(29, 238, 228);
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="main1">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
<div class="main2">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</body>
</html>
OUTPUT
JUSTIFY-CONTENT:
Defines how flexbox items are aligned according to the main axis, within a flexbox container.
justify-content: flex-start;
The flexbox items are pushed towards the start of the container's main axis.
justify-content: flex-end;
The flexbox items are pushed towards the end of the container's main axis.
justify-content: center;
The flexbox items are centered along the container's main axis.
justify-content: space-between;
The remaining space is distributed between the flexbox items.
justify-content: space-around;
The remaining space is distributed around the flexbox items: this adds space before the first item and after the last one.
justify-content: space-evenly;
The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JUSTIFYCONTENT</title>
<style>
body{
margin: 0;
padding: 0;
}
.main{
border: 2px dotted red;
height:80px;
width: 500px;
margin: 10px;
display: flex;
justify-content: flex-start;
}
.main1{
border: 2px dashed blue;
height: 100px;
width: 500px;
margin: 10px;
display: flex;
justify-content: center;
}
.main2{
border: 2px solid blueviolet;
height: 100px;
width: 500px;
margin: 10px;
display: flex;
justify-content: flex-end;
}
.main3{
border: 2px double rgb(22, 15, 29);
height: 100px;
width: 500px;
margin: 10px;
display: flex;
justify-content: space-around;
}
.main4{
border: 2px solid rgb(226, 80, 43);
height: 100px;
width: 500px;
margin: 10px;
display: flex;
justify-content: space-between;
}
.main5{
border: 2px solid rgb(226, 80, 43);
height: 100px;
width: 500px;
margin: 10px;
display: flex;
justify-content: space-evenly;
}
.box{
border: 5px;
height: 20px;
width: 20px;
background-color: rgb(101, 173, 224);
border-radius: 10px;
padding: 5px;
text-align: center;
margin: 10px;
}
</style>
</head>
<body>
<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main1">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main2">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main3">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main4">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main5">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</body>
</html>
OUTPUT
ALIGN-ITEMS:
It defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.
align-items: flex-start;
The flexbox items are aligned at the start of the cross axis. By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the top.
align-items: flex-end;
The flexbox items are aligned at the end of the cross axis. By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the bottom.
align-items: center;
The flexbox items are aligned at the center of the cross axis. By default, the cross axis is vertical. This means the flexbox items will be centered vertically.
align-items: baseline;
The flexbox items are aligned at the baseline of the cross axis. By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the baseline of their text align along a horizontal line.
align-items: stretch;
The flexbox items will stretch across the whole cross axis. By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items</title>
<style>
body{
margin: 0;
padding: 0;
}
.main{
border: 2px dashed black;
height: 80px;
width: 500px;
margin: 10px;
display: flex;
align-items: flex-start;
}
.main1{
border: 2px solid red;
height: 80px;
width: 500px;
margin: 10px;
display:flex ;
align-items: flex-end;
}
.main2{
border: 2px solid rgb(17, 0, 255);
height: 80px;
width: 500px;
margin: 10px;
display: flex;
align-items: center;
}
.main3{
border: 2px solid rgb(255, 247, 0);
height: 80px;
width: 500px;
margin: 10px;
display: flex;
align-items: baseline;
}
.main4{
border: 2px solid rgb(238, 0, 255);
height: 80px;
width: 500px;
margin: 10px;
display: flex;
align-items: stretch;
}
.box{
border: 2x solid black;
border-radius: 10px;
margin: 5px;
padding: 5px;
background-color: rgb(29, 238, 228);
height: 20px;
width: 20px;
}
.box1{
border: 2x solid black;
border-radius: 10px;
margin: 5px;
padding: 5px;
background-color: rgb(29, 238, 228);
}
#jay{
height: 30px;
width: 20px;
background-color: rgb(180, 30, 30);
}
#sur{
height: 30px;
width: 20px;
background-color: rgb(30, 180, 55);
}
</style>
</head>
<body>
<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main1">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main2">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main3">
<div class="box">1</div>
<div class="box" id="jay">2</div>
<div class="box">3</div>
<div class="box" id="sur">4</div>
</div>
<div class="main4">
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
</div>
</body>
</html>
OUTPUT
ALIGN-CONTENT
It defines how each line is aligned within a flexbox container. It only applies if flex-wrap: wrap; is present, and if there are multiple lines of flexbox items.
align-content: flex-start;
Each line will only fill the space it needs. They will all move towards the start of the flexbox container's cross axis.
align-content: flex-end;
Each line will only fill the space it needs. They will all move towards the end of the flexbox container's cross axis.
align-content: center;
Each line will only fill the space it needs. They will all move towards the center of the flexbox container's cross axis.
align-content: space-between;
Each line will only fill the space it needs. The remaining space will appear between the lines.
align-content: space-around;
Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-content</title>
<style>
body{
margin: 0;
padding: 0;
}
.main{
border: 2px dashed black;
height: 80px;
width: 200px;
margin: 10px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.main1{
border: 2px solid red;
height: 100px;
width: 200px;
margin: 10px;
display:flex ;
flex-wrap: wrap;
align-content: flex-end;
}
.main2{
border: 2px solid rgb(17, 0, 255);
height: 100px;
width: 200px;
margin: 10px;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.main3{
border: 2px solid rgb(255, 247, 0);
height: 100px;
width: 200px;
margin: 10px;
display: flex;
flex-wrap: wrap;
align-content:space-around;
}
.main4{
border: 2px solid rgb(238, 0, 255);
height: 100px;
width: 200px;
margin: 10px;
display: flex;
flex-wrap: wrap;
align-content:space-between;
}
.main5{
border: 2px solid rgb(187, 255, 0);
height: 100px;
width: 100px;
margin: 10px;
display: flex;
flex-wrap: wrap;
align-content:stretch;
}
.box{
border: 2x solid black;
border-radius: 10px;
/* margin: 5px; */
padding: 5px;
background-color: rgb(29, 238, 228);
height: 20px;
width: 20px;
}
.box1{
border: 2x solid black;
border-radius: 10px;
padding: 5px;
background-color: rgb(29, 238, 228);
}
</style>
</head>
<body>
<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main1">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main2">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main3">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main4">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="main5">
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
</div>
</body>
</html>
OUTPUT
ORDER
The order property is used to specify the order of a flexible item inside the flex container. The default value of order sets to 0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ORDER</title>
<style>
body{
margin: 0;
padding: 0;
}
.main{
border: 2px solid black;
padding: 10px;
height: 200px;
width: 500px;
display: flex;
}
.box{
border: 2px dotted rgb(112, 23, 207);
border-radius: 10px;
text-align: center;
font-size: large;
padding: 5px;
height: 60px;
width: 60px;
background-color: aquamarine;
}
#one{
order:3;
}
#two{
order:4;
}
#three{
order:1;
}
#four{
order:2
}
#five{
order:5;
}
</style>
</head>
<body>
<div class="main">
<div class="box" id="one">1</div>
<div class="box" id="two">2</div>
<div class="box" id="three">3</div>
<div class="box" id="four">4</div>
<div class="box" id="five">5</div>
</div>
</body>
</html>
OUTPUT
