Центрирование кнопок заголовка, не делая их статическими / абсолютными

В настоящее время я создаю фиксированный заголовок, который выглядит немного так.

https://gyazo.com/e0bab8ba195e33110b19123c7fc3c568

Логотип всегда слева, маленькие кнопки всегда справа, и кнопки меню в середине. Я дал логотип слева: 0, кнопки меню, использующие код под этим текстом, и маленькие кнопки справа: 0.

left: 50%;
transform: translateX(-50%);

Что я хочу, чтобы произошло: кнопки в середине всегда центрированы, пока одна из вещей сбоку (логотип или маленькие кнопки) не толкает ее куда-то еще. Когда бар становится слишком маленьким, все отталкивается вправо, но это происходит только тогда, когда все пустое пространство заполнено. (На этом этапе мой мобильный макет активируется)

Вот проблема: когда экран становится слишком маленьким, это происходит:
https://gyazo.com/044c02f056fd7d76d34cf4e1a912af45

Моя вторая попытка была с помощью inline-flex. Это код, который я пытался использовать (применяется ко всему заголовку):

display: inline-flex;
position: fixed;
justify-content: space-between;
flex-flow: nowrap;
white-space: nowrap;
overflow: hidden;

Проблема здесь в том, что логотип слева шире, чем маленькие кнопки справа, и потому я использую пространство-между средними кнопками по умолчанию отключается.

(Это не так ясно на этой картинке, но они определенно вне центра)
https://gyazo.com/e9f89e7918dc1f2d3059b1938b62536d

Есть ли какой-то вариант в flex, который я пропустил? Или есть лучший способ решить эту проблему?

EDIT: a friend suggested I add a invisible element to the small buttons on the right, which is exactly widely enough to keep the middle buttons in the center. Altough это работает, он все еще имеет некоторые пробелы из-за невидимого элемента.

1 ответ

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