How to properly implement a horizontal navigation menu using flex-box?

Question

css

Нужно сделать стандартную вроде бы вещь – горизонтальное меню.
Особенности: пункты меню должны быть "кнопочками":
1. текст должен быть отцентрован по вертикали
2. при наведении мышки фон становится другим
3. нажимается не только текстовая часть, а вся кнопка
4. у меню есть разделитель-граница (полосочка |), но не на всю высоту меню, а примерно на половину.
Что я уже сделал: codepen.io/anon/pen/MazoGe
Что не получается: пробовал разные варианты, никак не могу собрать так чтоб выполнялись все условия сразу.

Answer 1

codepen.io/anon/pen/PPxKBN

Answer 2

Why do you need this sex on flex?
Just like the good old days...