Sometimes, we want to align an element to the bottom with CSS flexbox.
In this article, we’ll look at how to align an element to the bottom with CSS flexbox.
How to align an element to the bottom with CSS flexbox?
To align an element to the bottom with CSS flexbox, we can use the justify-content property.
For instance, we write
<div class="content">
<div>
<h1>heading 1</h1>
<h2>heading 2</h2>
<p>Some more or less text</p>
</div>
<a href="/" class="button">Click me</a>
</div>
to add a div with some content inside.
Then we write
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
to make the outer div a flex container with display: flex;.
We set its flex direction to column with flex-direction: column;.
And then we use justify-content: space-between; so the the contents inside are spread apart vertically.
Conclusion
To align an element to the bottom with CSS flexbox, we can use the justify-content property.
