Sometimes, we want to align DIVs to the bottom or baseline with CSS.
In this article, we’ll look at how to align DIVs to the bottom or baseline with CSS
How to align DIVs to the bottom or baseline with CSS?
To align DIVs to the bottom or baseline with CSS, we use flexbox.
For instance, we write
#parentDiv {
display: flex;
justify-content: flex-end;
flex-direction: column;
width: 300px;
height: 300px;
background-color: #ccc;
background-repeat: repeat;
}
to make the element with ID parentDiv a flex container with display: flex;.
We make its flex direction vertical with flex-direction: column;.
Then we align its items at the bottom with justify-content: flex-end;.
Conclusion
To align DIVs to the bottom or baseline with CSS, we use flexbox.
