How to properly lay out such a menu on flexbox?

Question

css

Good afternoon. There is a task to make up such a menu using flexbox.

Here is a piece of code:

<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>

and styles:

.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;
}

but the result is like this:

How to make menu items the same size?

Answer 1

Give them the same size in %, apparently width: 20%, and padding for the overall block.
https://jsfiddle.net/webirus/o1uqm8b9/
And if you want everything to be Feng Shui, then use flex-basis: 20%.
https://jsfiddle.net/webirus/o1uqm8b9/1/

Answer 2

set for li-niks width: 100%;

Answer 3

For LI, you need to set flex: 1
codepen.io/Glaswr/pen/vgeKVE

Answer 4

Set flex2 to a fixed height and li to a fixed width

Answer 5

flex-basis: 1px
codepen.io/anon/pen/BpwzqQ