CSS Flexbox has been out there for some time and given that you know about all its features, it could be a boon and save you a lot of time trying to align elements and making them responsive.
Today we will see how to center elements using flexbox in just 3 lines of code!!
First lets take a container and add a box inside it.
<div class="container">
<div class="box"></div>
</div>
.box{
height: 50px;
width: 50px;
background-color: red;
}
.container{
border: 2px solid black
height: 200px;
}
In order to center the inner div we need to make the parent div a flex container.
To do so, we will use display: flex
property for the parent container. This will make all the elements inside the container flex-items.
.container{
border: 2px solid black
height: 200px;
display: flex;
}
Centering horizontally
To center our item horizontally we use the justify-content: center;
, this will center our block along the main-axis. The direction of main-axis can be changed using the flex-direction
property.
.container{
border: 2px solid black
height: 200px;
display: flex;
justify-content: center;
}
Centering Vertically
To center our item vertically we use the align-items: center;
, this will center our block along the cross-axis.
.container{
border: 2px solid black
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
The nice aspect of flexbox is the styles apply to all the children of our flex container. If we add two more elements, they all stay centered within the parent container.
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
flex-direction property
By default the flex-direction is set as row. If we change the flex-direction to column that would interchange the main-axis and the cross-axis. It will also make our items stack in a column instead of a row like before.
Hence, in this case our justify-content
property will center the boxes vertically and align-items
property will center the boxes horizontally.
.container {
border: 2px solid black;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
}
.container {
border: 2px solid black;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Top comments (5)
Very well written @khush2706 , keep it up !!
Thankyou!
Well Done!!
Thankyou😊
Khushboo Chaturvedi