Как правильно сверстать такое меню на flexbox?

Question

[Valentyn Fetisov]

Добрый день. есть задача сверстать вот такое меню с помощью флексбокса.


Вот кусок кода:

<menu class="flex2">
		<li><a href="#">Главная</a></li>
		<li><a href="#">Об Игре</a></li>
		<li><a href="#">Список Серверов</a></li>
		<li><a href="#">Наша Команда</a></li>
		<li><a href="#">Донат</a></li>
     </menu>

и стилей:

.flex2{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.flex2 li {
	border-left: 1px solid #247634;
	border-right: 1px solid #57e974;
	flex-basis: auto;
	flex-grow: 1;
}

но в результате получается вот так:


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

Answer 1

[Сергей Горячев]

Задать им одинаковый размер в %, судя по всему width: 20%, и padding для общего блока.
https://jsfiddle.net/webirus/o1uqm8b9/
А если хотите, чтобы всё было по феншую, то используйте flex-basis: 20%.
https://jsfiddle.net/webirus/o1uqm8b9/1/

Comments

[Valentyn Fetisov]

Но если количество пунктов изменится процентовку нужно будет менять. Нужно решение что бы ширина автоматом подгонялась.

[Сергей Горячев]

Валентин Фетисов: Никак. Flexbox подстраивается под ширину контента. Можете JS написать, который будет смотреть, сколько там пунктов, делить 100% на количество блоков и указывать ширину. Но она должна быть указана явно.

[Сергей Горячев]

Валентин Фетисов: Flexbox, каким бы он умным не был, но некоторые вещи просто нереально реализовать средствами CSS. Флекс просто не может знать, сколько у вас будет блоков и какую ширину нужно задать, особенности рендеринга браузерами. JS обрабатывается уже после загрузки страницы, он динамический, он умеет. А CSS не настолько крутая штука)

[Valentyn Fetisov]

Sergey Goryachev:

А если хотите, чтобы всё было по феншую, то используйте flex-basis: 20%.
https://jsfiddle.net/webirus/o1uqm8b9/1/

сделал вот так а теперь вылазит бочина тут:
https://yadi.sk/i/ihe9aVxN3AzVCG

Answer 2

[Юрий Олиярнык]

задай для li-шек width: 100%;

Answer 3

[WQP]

Для LI надо задать flex: 1
codepen.io/Glaswr/pen/vgeKVE

Answer 4

[Егор Живагин]

Задать для flex2 фиксированную height , и для li фиксированную width

Answer 5

[DTX]

flex-basis: 1px;

codepen.io/anon/pen/BpwzqQ