There are many ways to flex layout so that two boxes are distributed on the left and right sides

method one:

A parent box contains two child boxes, you can use the justify-content:space-between attribute

<div class='parent'>
 
<div class="left"></div>
 
<div class="right"></div>
 
</div>

 .parent {
 
display:flex;
 
flex-direction:row;
 
justify-content:space-between;
 
}

Method Two:

First align the child box to the right

display：flex；justify-content：flex-end；

Then set flex: 1 for the red box alone;

Principle: Use flex: 1 to dynamically fill the width

Method three:

You can set margin-right: auto for the red box;

Principle: After setting the width of the parent box, setting margin-right: auto will automatically occupy the remaining full width