Выровняйте 3 неравных блока слева, по центру и справа

Question

Я пытаюсь выровнять верхнее меню, которое состоит из 3 блоков контента.

То, чего я пытаюсь достичь, это:

• блок 1: выровнено по левому краю
• блок 2: по центру по горизонтали
• блок 3: выравнивание по правому краю

Если бы все 3 блока были одинакового размера, я мог бы использовать flexbox (как во фрагменте), но это не так, поэтому он не выдает нужный мне вывод.

Вместо этого flexbox размещает одинаковое пространство между 3 блоками, в результате чего средний блок выравнивается не по центру.

Мне было интересно, можно ли это сделать с помощью flexbox, или, если нет, другого решения. Это должно работать надежно на производстве, поэтому решение «Grid» неприменимо, так как поддержки недостаточно.

.container {
  margin: 20px 0;
}

.row {
  background-color: lime;
  display: flex;
  justify-content: space-between;
}

.item {
  background-color: blue;
  color: #fff;
  padding: 16px;
}

<div class="container">
  <div class="row">
    <div class="item">left, slightly longer</div>
    <div class="item">center, this item is much longer</div>
    <div class="item">right</div>
  </div>
</div>

Answer 1

Вы можете рассмотреть flex-grow:1;flex-basis:0% для левого и правого элементов, а затем использовать text-align для выравнивания содержимого внутри.Я добавил дополнительную оболочку, чтобы фон оставался только вокруг текста.

Хитрость заключается в том, чтобы рассчитать свободное пространство, удалив только среднее содержимое, и разделить его поровну на левый и правый элементы.

.container {
  margin: 20px 0;
  padding-top:10px;
  background:linear-gradient(#000,#000) center/5px 100% no-repeat; /*the center*/
}

.row {
  background-color: lime;
  display: flex;
  color: #fff;
}

.item:not(:nth-child(2)) {
  flex-basis: 0%;
  flex-grow: 1;
}

.item:last-child {
  text-align: right;
}

.item span{
  background-color: blue;
  display:inline-block;
  padding: 16px;
  height:100%;
  box-sizing:border-box;
}

<div class="container">
  <div class="row">
    <div class="item"><span>left, slightly longer</span></div>
    <div class="item"><span>center, this item is much longer</span></div>
    <div class="item"><span>right</span></div>
  </div>
</div>

Answer 2

вы можете дать flex-grow: 1 для класса предметов и отметьте

.item {
background-color: blue;
color: #fff;
padding: 16px;
flex-grow:1;
}

Надеюсь, это то, что вы ищете