Как отцентрировать логотип с помощью флексбокс?

Question

[twin232]

У меня получается логотип съезжает в лево, когда с права вставляешь блоки меню. Как решить проблему? Чтобы логотип не плавал туда сюда? Вот сам код:

.header { width: 1260px; margin: 0 auto; height: 350px; display: flex; justify-content: space-between; align-items: baseline; }

Comments

[Антон]

без codepen не разобраться

Answer 1

[Алексей]

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

Answer 2

[Роман Романенко]

думаю так https://jsfiddle.net/505r9d25/

Comments

[Ankhena]

Так будет правильно, если меню не будет занимать больше 30% ширины.

[Роман Романенко]

Ankhena W: я привёл пример, процентное соотношение можно менять как душе автора угодно

[Роман Романенко]

Да и картинка не очень понятная, какое-то menu в левом углу - кнопка это или что?!

[Ankhena]

Роман Романенко: Как Вы планируете ставить%?
Ставим 30%, сжимаем окно, в какой-то момент меню занимает всю ширину своего блока. Дальше что?

[Роман Романенко]

Ankhena W: media queries

[Ankhena]

Роман Романенко: ну и толку? Еще 1 пункт в меню добавится и все.

Я не вижу вменяемого решения без JS

Answer 3

[Дмитрий]

А что вам нужно? Что бы логотип был сразу слева от меню? Тогда задайте ему margin-left: auto;
А если вам нужно, что бы логотип был всегда справа, в не зависимости от меню, то добавьте или ему order: 1, или же остальным элементам, а логотипу ничего не добавляйте. Не помню как именно :)