2 つのボックスが左右に配置されるようにレイアウトを変更する方法は多数あります。

方法 1:

親ボックスには 2 つの子ボックスが含まれます。justify-content:space-between 属性を使用できます

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

 .parent { 表示:フレックス; フレックス方向:行; justify-content:space- between; }
 

 

 

 

方法 2:

最初に子ボックスを右に揃えます

表示：フレックス；正当化コンテンツ：フレックスエンド；

次に、赤いボックスのみに flex: 1 を設定します。

原則: flex: 1 を使用して動的に幅を埋める

方法 3:

赤いボックスに margin-right: auto を設定できます。

原則: 親ボックスの幅を設定した後、margin-right: auto を設定すると、残りの全幅が自動的に占有されます