What is Flexbox?
Flexbox is a tool that is used to design layouts in CSS very easily and quickly in an effective way. Basically, it is broken into two parts:
Flexbox Container: It is a parent element where we can define all the properties of flexbox layouts.
Flexbox Items: All the items inside the flexbox container are called flexbox items.
Flexbox Layout
Note:- By default, the main axis goes horizontally, and the cross axis goes vertically. Firstly, we will see how to create layouts using the main axis.
1. justify-content
By using this property, flex items will arrange with respect to the main axis.
a. flex-start
It is the default value of justify-content, by using this all the flex items shift toward the left side of the main axis of the flex container.
Code:-
.container {
display: flex;
justify-content: flex-start;
}
Output:-
b. flex-end
By applying this, all the flex items will shift toward the right side of the main axis of the flex container.
Code:-
.flex-container {
display: flex;
justify-content: flex-end;
}
Output:-
c. center
By using this, all the flex items are aligned in the center of the main axis of the flex container.
Code:-
.flex-container {
display: flex;
justify-content: center;
}
Output:-
d. space-around
By using this, all the flex items get spread across the main axis with equal space between all the flex items and half of the space on either side of the flex container.
Code:-
.flex-container {
display: flex;
justify-content: space-around;
}
Output:-
e. space-between
By using this, all the flex items get spread across the main axis with equal space between all the flex items of the flex container.
Code:-
.flex-container {
display: flex;
justify-content: space-between;
}
Output:-
f. space-evenly
By using this, all the flex items get spread across the main axis with equal space between all the flex items and both sides of the flex container.
Code:-
.flex-container {
display: flex;
justify-content: space-evenly;
}
Output:-
2. align-items
By using this property, now flex items are arranged with respect to the cross-axis.
a. stretch
Here, we have different flex items for different heights, and by using this property, all the flex items which haven't any fixed height will get stretched as much as the content space is given. While those flex items which have fixed height will not stretch.
Code:-
.flex-container {
display: flex;
align-items: stretch;
}
b. flex-start
It is exactly similar to the flex-start of justify-content but the only difference is that the axis is changed here. All the flex items get arranged at the top of the cross-axis.
Code:-
.flex-container {
display: flex;
align-items: flex-start;
}
Output:-
c. flex-end
It is exactly similar to the flex-end of justify-content but the only difference is that the axis is changed here. All the flex items get arranged at the bottom of the cross-axis.
Code:-
.flex-container {
display: flex;
align-items: flex-end;
}
Output:-
d. center
It is exactly similar to the center of justify-content but the only difference is that the axis is changed here. All the flex items get arranged at the center of the cross-axis.
Code:-
.flex-container {
display: flex;
align-items: center;
}
Output:-
3. flex-direction
By using this property, we can sets the how flex items are placed in flex-container defining the main axis and direction. By default, the flex-direction is row i.e items arranged with the main axis (horizontally).
a. row(default)
By using this, flex-items are arranged horizontally on the main axis. It is the default value of flex-direction.
Code:-
.flex-container {
display: flex;
flex-direction: row;
}
Output:-
b. row-reverse
By using this, flex-items are arranged horizontally from right to left on the main axis.
Code:-
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Output:-
c. column
By using this, flex-items are arranged veritcally from top to bottom on the main axis. The flex-items takes all the width of flex-container if it is not determined.
Code:-
.flex-container {
display: flex;
flex-direction: column;
}
Output:-
d. coloum-reverse
By using this, flex-items are arranged vertically from top to bottom on the main axis.
Code:-
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Output:-
4. align-self
Here, all the properties we discussed earlier, are used with flex-container but this property is used with flex-items specifically.
Code:-
/* Flex-item 1 */
.flex-item:nth-child(1){
align-self: stretch;
}
/* Flex-item 2 */
.flex-item:nth-child(2){
align-self: flex-start;
}
/* Flex-item 3 */
.flex-item:nth-child(3){
align-self: flex-end;
}
/* Flex-item 4 */
.flex-item:nth-child(4){
align-self: center;
}
Output:-
5. Sizing flex items
By using these properties, we can easily size the flex items. This is done with flex-grow, flex-shrink, and flex-basis.
Code:-
.flex-item{
border: 2px solid black;
text-align: center;
padding: 30px;
background-color: #00ffff;
flex-grow: 1;
}
Output:-
a. flex-grow
By applying this property on flex item, we can define that how much extra space that flex item needs to fill the container.
Code:-
.flex-item{
border: 2px solid black;
text-align: center;
padding: 30px;
background-color: #00ffff;
flex-grow: 1;
}
Output:-
Before applying flex-grow, the boxes were fitted like this. They aren't taking the space left beside them to fill the container.
After applying the property flex-grow on item, it looks like this.
b. flex-basis
By using this property, we can specify the initial length of the flex item. It works similarly to max-width.
Code:-
.flex-item{
border: 2px solid black;
text-align: center;
padding: 30px;
background-color: #00ffff;
flex-basis: 200px;
}
Output:-
Before applying the flex-basis property,
After applying the flex-basis property, and also note that the size of the boxes will not exceed more than 200px.
c. flex-shrink
If any flex-item sizes get increased more than their container then using this property, the items get shrink to fit the container.
Code:-
.flex-item{
border: 2px solid black;
text-align: center;
padding: 30px;
background-color: #00ffff;
flex-basis: 200px;
}
Output:-
Here, all the boxes will grow at the same pace but at the time of shink (means as we reduce the size of the screen), the width of the first box decrease at a faster rate than the others.
Before applying flex-shrink to the first box,
After applying the property and reducing the size of the window, it will look like
Well, I hope you liked it, I know it was little lengthty and I think I covered all the required concept of CSS flexbox in this article. So, if this blog added any value to your knowledge, my work is done.