Почему выпадают элементы из флекс-контейнера?

Question

[Kilila]

При правке чужой верстки вылез непонятный механизм в шапке сайта - всё на флексах, внутри контейнера-центровищика три элемента (один с маленьким логотипом, второй - пункты меню, третий - вход в личный кабинет). За счет auto-маргинов слева и справа у пунктов меню, лого и "вход прижимаются к краям. В сами пункты по-середине разведены фиксированными маргинами и при попытке перевести их на %-ые происходит следующее, - кнопка входа может при определенном сжатии просто наезжать на пункты меню, как будто их и нет, т.к. контейнер игнорирует всё, хотя всё должно сжиматься и места там еще хватает. Картинки с иллюстрацией изменений:

Comments

[Ankhena]

-> jsfiddle.net

[Kilila]

Ankhena, https://jsfiddle.net/bqyyv37c/ сорри

[Ankhena]

Kilila, логично, что наезжают, а куда им еще деваться?

Ссылки фиксированной, но неизвестной ширины (определяются шириной слов), margin собираетесь ставить в %. Я вижу путь вычисления корректного значения % только через JS. Только зачем это тут...

Используйтеjustify-content: spase-between
margin либо уберите либо оставьте минимальный либо поставьте padding для a.

[Kilila]

Ankhena, т.е. за счет того, что у ссылок нет фиксированной прописанной величины, при прописывании %ых маргинов система не может корректно рассчитать все расстояния и т.д.? Ведь маргины прописываются для li, а не для самих ссылок

[Ankhena]

Kilila, при чем тут система? Вы можете?
Ширина блока зависит от ширины экрана, ширину экрана мы не знаем. Предположим все буквы дают в сумме 300 точек. Сколько останется места в процентах?

[Kilila]

Ankhena, я просто задаю вопросы, т.к. хочу досконально понять все детали. Вот есть макет, у него ширина например 1920, я на нем смотрю расстояния между пунктами и и считаю это расстояние в процентах от общей ширины, по логике, при сужении будет пересчитываться же всё или я не прав опять? :(

[Kilila]

Ankhena, вот сделал в песочнице https://jsfiddle.net/bqyyv37c/

там как раз я меняю:

.header-menu-center li {
margin: 0px 70px;
}
на, например 5%
.header-menu-center li {
margin: 0px 5% ;
}

И если через инспектор кода глянуть, то видно что контейнер в середине становится меньше контента .

[Ankhena]

Kilila, я забыла в каком классе изучают проценты.

Ладно.
1920 окно
Буквы в ссылках занимают 800 точек и мы предположим, что текст не поменяется клиентом.
Самих ссылок 5 штук.
Для простоты будем задавать им только левые отступы.

Свободного места остается 58.3%
Каждый отступ по 11.6%

Отлично.
Сжимаем окно до 1000.
Сколько места занимают отступы в пикселях?
116×5=580 точек.
А ссылки как были 800 так и остались.

========
Можно использовать calc. Но чтобы его использовать у нас должна быть гарантия, что не поменяются шрифты, размеры, количество букв и слов и самих ссылок.

Вывод: использовать space-between и пусть браузер сам распределяет свободное пространство.

[Kilila]

Ankhena, благодарю вас, теперь понял суть)

[Kilila]

Ankhena, кстати, можете еще подсказать пожалуйста - оставил паддинги для "а" небольшие, маргины у li убрал, прописал justify-content: spase-between, но он не сработал почему-то в том же самом примере

[Ankhena]

Kilila, space

Используйте редактор с подсветкой кода, он помечает такие ошибки

[Kilila]

Ankhena, май мистейк именно тут, в коде правильно прописываю, но не работает

[Ankhena]

Kilila,
я очень терпеливая...

-> jsfiddle.net
кому вы его задаете, что с шириной у этого кому задаете, что в инспекторе написано...