It is new layout mode in CSS and it is used to design flexible layout structure without using float or position property. It provides a more efficient way to layout,
align and distribute space among items in the container.
It is mainly used to make CSS3 capable to change its item?s width and height to best fit for all available spaces.
It is preferred over block model.The most impressive thing of flexbox is that it is a responsive layout structure.
The CSS3 flexbox contains flex containers and flex items.
Let's take an example to show three flex items within a flex container. By default, they are set along the horizontal flex line, from left to right.
Here in flexbox we are having a flex container which contains the elements and this container is having
some following property :-
This property specifies in which direction should the flex elements be . We are having 4 values in this direction property
- row :- the flex elements here will be in horizontal manner(left to right).
- row-reverse :- the flex elements here will be in reverse horizontal manner (right to left).
- column :- the flex elements here will be in vertical manner (top to bottom).
- column-reverse :- the flex elements here will be in reverse-vertical manner (bottom to top).
Let's understand this by the following program :-
The "flex-direction: row;" stacks the flex items horizontally (from left to right):
<!DOCTYPE html>
<html>
<head>
<style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
.flex-container1 {
display:flex;
flex-direction:row;
width: 400px;
height: 200px;
background-color:lightpink;
}
.flex-item1 {
background-color: brown;
width: 100px;
height: 100px;
margin: 10px;
font-size:30px;
color:white;
text-align:center;
}
</style>
</head>
<body>
<div class="flex-container1">
<div class="flex-item1"> 1 </div>
<div class="flex-item1"> 2 </div>
<div class="flex-item1"> 3 </div>
</div>
</body>
</html>
Output of the Program:
The "flex-direction: row;" stacks the flex items horizontally (from left to right):
The "flex-direction: row-reverse;" stacks the flex items reverse horizontal manner (from right to left):
<!DOCTYPE html>
<html>
<head>
<style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
.flex-container2 {
display:flex;
flex-direction:row-reverse;
width: 400px;
height: 200px;
background-color:lightpink;
}
.flex-item2 {
background-color: brown;
width: 100px;
height: 100px;
margin: 10px;
font-size:30px;
color:white;
text-align:center;
}
</style>
</head>
<body>
<div class="flex-container2">
<div class="flex-item2"> 1 </div>
<div class="flex-item2"> 2 </div>
<div class="flex-item2"> 3 </div>
</div>
</body>
</html>
Output of the Program:
The flex-direction Property
The "flex-direction: row-reverse;" stacks the flex items reverse horizontal (from right to left):
The "flex-direction: column;" stacks the flex items vertically (from top to bottom):
<!DOCTYPE html>
<html>
<head>
<style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
.flex-container3 {
display:flex;
flex-direction:column;
width: 400px;
height: 200px;
background-color:lightpink;
}
.flex-item3 {
background-color: brown;
width: 100px;
height: 100px;
margin: 10px;
font-size:30px;
color:white;
text-align:center;
}
</style>
</head>
<body>
<div class="flex-container3">
<div class="flex-item3"> 1 </div>
<div class="flex-item3"> 2 </div>
<div class="flex-item3"> 3 </div>
</div>
</body>
</html>
Output of the Program:
The flex-direction Property
The "flex-direction: column;" stacks the flex items vertically (from top to bottom):
The "flex-direction: column-reverse;" stacks the flex items reverse vertically manner (but from bottom to top):
<!DOCTYPE html>
<html>
<head>
<style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
.flex-container4 {
display:flex;
flex-direction:column-reverse;
width: 400px;
height: 200px;
background-color:lightpink;
}
.flex-item4 {
background-color: brown;
width: 100px;
height: 100px;
margin: 10px;
font-size:30px;
color:white;
text-align:center;
}
</style>
</head>
<body>
<div class="flex-container4">
<div class="flex-item4"> 1 </div>
<div class="flex-item4"> 2 </div>
<div class="flex-item4"> 3 </div>
</div>
</body>
</html>
Output of the Program:
The flex-direction Property
The "flex-direction: column-reverse;" stacks the flex items reverse vertically manner (but from bottom to top):
So this is our flex elements starting from row direction.
Flex wrap property
This property specifies whether elements should wrap or not. If list items are more and any user is watching
those items in small screen than generally he can't able to see all items , so to make him view the whole elements we are using
this flex-wrap property by which items use to come in next line known as flex line.
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container5 {
display:flex;
flex-wrap:wrap;
background-color:lightpink;
}
.flexitem5 {
width:100px;
height:100px;
margin:5px;
text-align:center;
color:white;
font-size:20px;
}
</style>
</head>
<body>
<div class="flex-container5">
<div class="flex-item5"> 1 </div>
<div class="flex-item5"> 2 </div>
<div class="flex-item5"> 3 </div>
<div class="flex-item5"> 4 </div>
<div class="flex-item5"> 5 </div>
<div class="flex-item5"> 6 </div>
<div class="flex-item5"> 7 </div>
<div class="flex-item5"> 8 </div>
<div class="flex-item5"> 9 </div>
<div class="flex-item5"> 10 </div>
<div class="flex-item5"> 11 </div>
<div class="flex-item5"> 12 </div>
</div>
</body>
</html>
Output of the Program:
flex-container and elements
1
2
3
4
5
6
7
8
9
10
11
12
So now if we resize our browser these elements we can see coming in next line.
Flex flow property
The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container6 {
display:flex;
height:500px;
flex-flow:column wrap;
background-color:lightpink;
}
.flex-item6 {
width:100px;
height:100px;
margin:5px;
text-align:center;
color:white;
font-size:20px;
}
</style>
</head>
<body>
<div class="flex-container6">
<div class="flex-item6"> 1 </div>
<div class="flex-item6"> 2 </div>
<div class="flex-item6"> 3 </div>
<div class="flex-item6"> 4 </div>
<div class="flex-item6"> 5 </div>
<div class="flex-item6"> 6 </div>
<div class="flex-item6"> 7 </div>
<div class="flex-item6"> 8 </div>
<div class="flex-item6"> 9 </div>
<div class="flex-item6"> 10 </div>
<div class="flex-item6"> 11 </div>
<div class="flex-item6"> 12 </div>
</div>
</body>
</html>
Output of the Program:
1
2
3
4
5
6
7
8
9
10
11
12
So now through flex-flow property we can specify both flex-direction and flex-wrap.
Justify Content property
The justify-content property is used to align the flex items:
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container9 {
display:flex;
justify-content: flex-end;
background-color:lightpink;
}
.flex-item9 {
width:100px;
margin:5px;
text-align:center;
color:white;
font-size:20px;
}
</style>
</head>
<body>
<p> flex-container and elements <p>
<div class="flex-container9">
<div class="flex-item9"> 1 </div>
<div class="flex-item9"> 2 </div>
<div class="flex-item9"> 3 </div>
</div>
</body>
</html>
Output of the Program
flex-container and elements
the other property of justify-content are as- center, flex-start, flex-end, space-around, space-between.
Align items property
This property specifies the alignment of items vertically.We can align the flex items vertically by align-items property.
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container7 {
display:flex;
align-items:center;
background-color:lightpink;
}
.flex-item7 {
width:100px;
margin:5px;
text-align:center;
color:white;
font-size:20px;
}
</style>
</head>
<body>
<p> flex-container and elements <p>
<div class="flex-container7">
<div class="flex-item7"> 1 </div>
<div class="flex-item7"> 2 </div>
<div class="flex-item7"> 3 </div>
</div>
</body>
</html>
Output of the Program
flex-container and elements
So now through align-items property we can align elements vertically and here we align the items at the center.
We can also use align items property as- flex-end, flex-start, stretch, baseline.
Align content property
This property specifies the alignment of flex lines .We can align the flex lines by align-content property.
Let's understand this by the following program :-
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container8 {
display:flex;
align-content: stretch;
background-color:lightpink;
}
.flex-item8 {
width:100px;
margin:5px;
text-align:center;
line-height:75px;
font-size:20px;
}
</style>
</head>
<body>
<p> flex-container and elements <p>
<div class="container">
<div class="flex-item8"> 1 </div>
<div class="flex-item8"> 2 </div>
<div class="flex-item8"> 3 </div>
</div>
</body>
</html>
Output of the Program
So now through align-content property we have align the elements and other properties are-center, flex-start, flex-end, stretch, space-around and space-between.
