Выровнять блоки по левому краю, центру и правому краю

Question

.g {
  display:flex;
  height:50px;
  width:100%;
  background: green;
}
.l {
  height:100%;
  aspect-ratio:1;
  background: red;
  margin-right:auto;
}
.r {
  height:100%;
  aspect-ratio:1;
  background: blue;
}

<div class='g'>
  <div class='l'>L</div>
  <div class='r'>R</div>
</div>

.g {
  display:flex;
  height:50px;
  width:100%;
  background: green;
}
.l {
  height:100%;
  aspect-ratio:1;
  background: red;
  margin-right:auto;
}
.r {
  height:100%;
  aspect-ratio:1;
  background: blue;
}

.C {
  height:100%;
  aspect-ratio:1;
  background: #000;
  color:#fff;
  margin: 0 auto;
}

.l {
   margin:unset;
}

<div class='g'>
  <div class='l'>L</div>
  <div class='C'>C</div>
  <div class='r'>R</div>
</div>

Когда в блоке появляется блок по центру, необходимо фиксить левый

.l {
   margin:unset;
}

Иначе центральный блок не будет расположен по центру.

Вопрос в том, возможно ли универсально сделать, чтобы лишний раз не пришлось фиксить левый блок.

Изначально на левом блоке

margin-right:auto;

Иначе правый блок не прижать к правому краю...

Answer 1

Какую ситуацию я не предусмотрел?

.g {
  display: flex;
  height: 50px;
  width: 100%;
  background: green;
  justify-content: space-between;
  margin-bottom: 1em;
}

.l {
  height: 100%;
  aspect-ratio: 1;
  background: red;
}

.r {
  height: 100%;
  aspect-ratio: 1;
  background: blue;
}

.C {
  height: 100%;
  aspect-ratio: 1;
  background: #000;
  color: #fff;
  margin: auto;
}

.g:not(:has(.C)) .l+.l {
  margin-right: auto;
}

<div class='g'>
  <div class='l'>L</div>
  <div class='C'>C</div>
  <div class='r'>R</div>
</div>

<div class='g'>
  <div class='l'>L</div>

  <div class='r'>R</div>
</div>

<div class='g'>
  <div class='l'>L</div>
  <div class='l'>L</div>
  <div class='C'>C</div>
  <div class='r'>R</div>
  <div class='r'>R</div>
</div>

<div class='g'>
  <div class='l'>L</div>
  <div class='l'>L</div>

  <div class='r'>R</div>
  <div class='r'>R</div>
</div>

БЛОГ НА HUSL

Выровнять блоки по левому краю, центру и правому краю

Ответы (1 шт):