Как верстать меню, ссылки которого с разными отступами?

Question

[Сергей Дроздов]

Как сверстать такую навигацию: нужно каждой ссылке задавать нужный padding или можно как-то без костылей, на флексах или гридах? Если можно, то как?

Comments

[Ivan Ustûžanin]

можно на флексах c flex-flow: wrap и с flex: 1 0 auto для детей
правда видя пункт с глобусом, думается что проще будет сделать 2 строки флексов

[ReActor Дмитрий Вершанский]

grid-template-areas

[Сергей Дроздов]

ReActor Дмитрий Вершанский, то есть, для каждой ссылки нужен дополнительный идентификатор и она будет ограничена по ширине?

[Сергей delphinpro]

IvanU7n, Для глобуса фиксированный размер. Остальные - flex-grow:1 + text-align:center;

[Ivan Ustûžanin]

Сергей delphinpro, я больше по расположению, этот глобус должен быть в середине списка ссылок при разрешённом переносе, а начать новую с определённого элемента во флексах нельзя

[Сергей delphinpro]

IvanU7n, можно добавить псевдоэлемент для контейнера, задать ему нужный order (после глобуса) и размеры 0х100%, это перенесет его на новую линию.

[Сергей Дроздов]

Сергей delphinpro, ну для этого же надо каждой ссылке задать order,

[Сергей delphinpro]

Сергей Дроздов, необязательно. Только для глобуса отдельный селектор.
Если, конечно, ссылки идут в том же порядке, что и на картинке.

.item { order: 1; }
.container::before { order: 2; }
.item.globus ~ .item { order: 3; }

[Сергей delphinpro]

Сергей Дроздов, Покажите разметку в codepen.io, я покажу как можно сделать.

Answer 1

[Алексей]

Например так
https://codepen.io/tssaltan/pen/wvONxmQ