How to right-align flex item with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *