Sometimes, we want to position a div at the bottom of its container with CSS.
In this article, we’ll look at how to position a div at the bottom of its container with CSS.
How to position a div at the bottom of its container with CSS?
To position a div at the bottom of its container with CSS, we use flexbox.
For instance, we write
.parent {
display: flex;
}
.child {
align-self: flex-end;
}
to make the element with class parent the flex container.
Then then element with class child that’s inside the element with class parent has the align-self: flex-end; style so that it stays at the bottom of the flex container.
Conclusion
To position a div at the bottom of its container with CSS, we use flexbox.
