css - Flexbox float right

Question

I am looking for solutions on Flexbox layout best practice for a common use case.

In the example, I want to use Flexbox to make the score number to be float to the right. I thought of using:

position: absolute;
right: 0;

But then the problem is that we can't use the center align with the outer box.

Another way I can think of is to make another flex box to wrap the image and name part, then create an outer flex box to use

justifyContent: space-between;

to make the expected layout.

question from:https://stackoverflow.com/questions/36601231/flexbox-float-right

Answer 1

This will help you

.parent {
  display: flex;
}

.child2 {
  margin-left: auto;
}

<div class="parent">
  <div class="child1">left</div>
  <div class="child2">right</div>  
</div>