Как сделать такое в одном меню?

Question

[Programmir]

Есть 10 пунктов у меню. Верхние пять пунктов прибиты к левой стороне контейнера, а нижние пять пунктов к правой стороне контейнера. Конечно, можно сделать два пункта меню, верхнему задать justify-content: flex-start, а нижнему flex-end. Но мне кажется, что семантически это не совсем верно. Да и при уменьшенном экране, например, на одной строке будет два пункта меню. То есть это должен быть один блок меню. Но вот как такое провернуть? Мне иногда кажется, что веб-дизайнеры любят издеваться над верстальщиками))

Comments

[Сергей delphinpro]

https://jsfiddle.net/b7egd4n4/

Answer 1

[Николай Чуприк]

display: grid

Comments

[Programmir]

вроде его ещё рано использовать)

[Николай Чуприк]

Programmir, есть такое. Я правда сделал приложение для нашей небольшой компании и для дилеров на гридах. Но у меня ситуация, что я могу всем заинтересованным позвонить и заставить обновить браузеры. :) IE конечно отдыхает, ну и хрен с ним.

Answer 2

[DTX]

align-self

Answer 3

[Just_User1]

Не благадари <3
https://jsfiddle.net/g82b7wdb/

Comments

[Programmir]

свою ориентацию можно было не указывать) меню выстроены горизонтально, а не вертикально, между ними отступ 20px