Есть много способов гибкого макета, чтобы два блока были распределены по левой и правой сторонам.

метод первый:

Родительский блок содержит два дочерних блока, вы можете использовать атрибут justify-content:space-between

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

 .parent { дисплей: флекс; flex-направление: строка; выровнять содержание:пробел между; }
 

 

 

 

Способ второй:

Сначала выровняйте дочерний блок вправо

display:flex;justify-content:flex-end;

Затем установите flex: 1 только для красного поля;

Принцип: используйте flex: 1 для динамического заполнения ширины

Способ третий:

Вы можете установить margin-right: auto для красного поля;

Принцип: после установки ширины родительского поля установка margin-right: auto автоматически займет оставшуюся полную ширину

 

 

рекомендация

отblog.csdn.net/m0_59735348/article/details/128112041