Sometimes, we want to make a flex item float right with CSS.
In this article, we’ll look at how to make a flex item float right with CSS.
How to make a flex item float right with CSS?
To make a flex item float right with CSS, we set the justify-content property.
For instance, we write
<div class="parent">
<div>Ignore parent?</div>
<div>another child</div>
</div>
to add nested divs.
Then we write
.parent {
display: flex;
justify-content: flex-end;
}
to apply justify-content: flex-end; to the parent to align the child divs to the right side of the parent div.
Conclusion
To make a flex item float right with CSS, we set the justify-content property.
