Выравнивание пунктов меню с разной шириной по горизонтали. Есть ли способ?

Question

[Konstantin Trunov]

Суть такая.
Имеется горизонтальное меню из 7 пунктов. У каждого пункта разная ширина. Заказчик хочет, чтобы каждый пункт меню был равномерно распределен по ширине контейнера под меню.
Есть несколько брэйкпоинтов:
> 1144px - контейнер под меню не меняет свою ширину (тут в целом удалось выровнять)
< 1144px - контейнер под меню имеет динамическую ширину в зависимости от ширины устройства.
Вот тут начинаются проблемы.
Пытался выровнять флексбоксами. В целом получается с помощью justify-content: space-around,
однако в этом случае между пунктами получаются большие пробелы, что смотрится очень некрасиво. И когда начинаешь добавлять padding'и для пунктов, обязательно в каком-либо разрешении меню ломается.

А мне нужно держать его в таком состоянии до 768px, пока не появляется "гамбургер".
Может кто знает какой-нибудь JS-плагин, который может динамически выравнивать эти пункты?
или способ на чистом css3.

Спасибо.

Answer 1

[Ankhena]

Неправильное проектирование.

Вариант: уменьшать padding|margin, уменьшать шрифт, переносить длинные на 2 строчки.

JS сделает ровно как flex, лишних точек, чтобы не ломалось при маленькой ширине он ниоткуда не возьмет.

Comments

[Konstantin Trunov]

Спасибо за ответ. Согласен, проектирование вообще никакое. Вы бы видели, что до меня там натворил индус. Кошмарный сон для верстальщика. Пришлось делать огромные костыли, а учитывая, что все это уже натянуто на Wordpress, изрядно сломал себе мозг.

[Ankhena]

Konstantin Trunov: сочувствую

еще можно убрать uppercase, когда не влезает или уменьшить жирность или взять аналогичный но более тонкий шрифт
расстояние между буквами там убирать уже некуда

[Dark Hole]

Konstantin Trunov: таблица не помогла?

[Ankhena]

Dark Hole: таблица тоже не даст лишних точек.

[Dark Hole]

Ankhena W: в каком смысле?

[Ankhena]

Dark Hole: В прямом. Вопрос внимательно прочитайте. При маленьких разрешениях, но больше 768, меню ломается, а это значит что оно просто не влезает с заданными отступами и размером шрифта. И так будет происходить без разницы чем его выравнивали, display: table или flex.

[Dark Hole]

Ankhena W: ну почему - table + position: absolute не будет ломать вообще

[Ankhena]

Dark Hole: Если у Вас сумма ширины текста в названиях пунктов меню (без отступов, только буквы и пробелы между слов), например, 800 точек. То каким образом position:absolute поможет уместится в блок 768 точек?

[Dark Hole]

Ankhena W: эх... наедут на друг друга, конечно

[Ankhena]

Dark Hole: :)

[Dark Hole]

Ankhena W: вообще-то можно с помощью vw менять размер шрифта, но это немного не то

[Ankhena]

Dark Hole: можно, я про уменьшение шрифта написала в ответе, способов это делать много.

[Konstantin Trunov]

Ankhena W: https://jsfiddle.net/truman55/kh946ocy/ написал решение сам. Ширина контейнера минус ширина всех пунктов меню. Полученный остаток делю на количество пунктов меню, и делю на 2. Получаются всегда нужные отступы. Не знаю на сколько этот вариант имеет право на жизнь :-)

[Ankhena]

Konstantin Trunov: если при этом все влезло, то флекс без указания отступов сделал бы тоже самое

[Ankhena]

Konstantin Trunov: https://jsfiddle.net/px5Lakqn/
justify-content: space-around или justify-content: space-between - на вкус заказчика