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.

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>

Answer 2

Use justify-content: space-between it will push elements to the sides:

.flex {  display: flex;  justify-content: space-between; }  .flex-grow {   flex-grow: 1; }  .one {   border: 1px solid black;   width: 20px; height: 20px; }  .two {   border: 1px solid black;   width: 20px; height: 20px; }  .three {   border: 1px solid black;   width: 20px; height: 20px; }

Growing middle element <div class="flex">   <div class="one"></div><div class="two flex-grow"></div><div class="three"></div> </div>  Without growing element <div class="flex">   <div class="one"></div><div class="two"></div><div class="three"></div> </div>  Without middle element <div class="flex">   <div class="one"></div><div class="three"></div> </div>

Refer to this amazing tutorial to easily understand how flex box behaves: https://css-tricks.com/snippets/css/a-guide-to-flexbox/