How to make a flex item float right with CSS?

Spread the love

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.

Leave a Reply

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