Sometimes, we want to right-align flex item with CSS.
In this article, we’ll look at how to right-align flex item with CSS.
How to right-align flex item with CSS?
To right-align flex item with CSS, we can set the flex-grow property.
For instance, we write
<div class="main">
<div class="a"><a href="#">Home</a></div>
<div class="b"><a href="#">Some title centered</a></div>
<div class="filler"></div>
<div class="c"><a href="#">Contact</a></div>
</div>
to add a div with class filler as the 3rd child of the outer div.
Then we write
.filler {
flex-grow: 1;
}
to make the div with class filler fill the remaining space not filled by other divs.
The div with class c will be pushed to the right side.
Conclusion
To right-align flex item with CSS, we can set the flex-grow property.
