Bootstrap+Flexbox: расположение среднего элемента по центру?

Question

[Сергей Наломенко]

Всем привет!

Суть вопроса: верстаю на Bootstrap 4.3, и возникла задача.
В шапке есть условно три блока: левый, центральный (лого, например) и правый, которые в данный момент выравниваются по правилу .justify-content-between, суть которого показана на картинке ниже.


Если добавить контента в правый блок, то его ширина увеличивается, и, следовательно, сдвигает центральный элемент влево. Есть ли какое-либо стандартное красивое решение, позволяющее левому блоку прилипнуть к левому краю, правому — к правому, а центральному быть отцентрированным относительно родительского элемента, не взирая на ширину любого из трёх блоков?

Всем заранее спасибо! :)

Comments

[Сергей delphinpro]

.левый,
.правый {
  width: calc(50% - половина ширины логотипа)
}

[Сергей Наломенко]

Сергей delphinpro, боюсь, это так не работает. Поскольку width: calc(50% - 58px) в итоге даёт результат –8%

[Сергей delphinpro]

Сергей Наломенко, угу, сто раз так делал, а оно, оказывается, не работает +))

[Сергей Наломенко]

Сергей delphinpro, к нативному CSS вопросов нет. Вопрос касался именно реализации на базе Bootstrap 4.3

[xonar]

Сергей delphinpro, Хотел уточнить у вас. Почему в данном примере у блока right есть отступ справа? От родителя? Разве блок слева и справа, не должны иметь 1 ширину (они имеют одинаковую в итоге ширину) и не иметь отступов?

Просто хочу разобраться, почему такое поведение.



Вот задал родителю даже фиксированную ширину, отступ всегда есть, почему right блок не заполняет всё пространство?

[Сергей delphinpro]

xonar, в моем примере никаких отступов нет. Вы его меняли?

[xonar]

Сергей delphinpro, Ваш код не изменял, изменял в своём codepen. Я уже разобрался. Я делал изображение больше, но забывал изменять %. Имею ввиду тут параметры - width: calc(55% - 80px);