Existem várias maneiras de flexibilizar o layout para que duas caixas sejam distribuídas nos lados esquerdo e direito

método um:

Uma caixa pai contém duas caixas filhas, você pode usar o atributo align-content:space-between

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

 .parent { display:flex; flex-direction:row; justificar-conteúdo:espaço-entre; }
 

 

 

 

Método Dois:

Primeiro alinhe a caixa filho à direita

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

Em seguida, defina flex: 1 apenas para a caixa vermelha;

Princípio: Use flex: 1 para preencher dinamicamente a largura

Método três:

Você pode definir margin-right: auto para a caixa vermelha;

Princípio: Depois de definir a largura da caixa principal, definir margin-right: auto ocupará automaticamente a largura total restante