Как правильно реализовать горизонтальное меню навигации используя flex-box?

Question

[RNB]

Нужно сделать стандартную вроде бы вещь – горизонтальное меню.

Особенности: пункты меню должны быть "кнопочками":

1. текст должен быть отцентрован по вертикали
2. при наведении мышки фон становится другим
3. нажимается не только текстовая часть, а вся кнопка
4. у меню есть разделитель-граница (полосочка |), но не на всю высоту меню, а примерно на половину.

Что я уже сделал: codepen.io/anon/pen/MazoGe
Что не получается: пробовал разные варианты, никак не могу собрать так чтоб выполнялись все условия сразу.

Answer 1

[holfza]

codepen.io/anon/pen/PPxKBN

Answer 2

[Александр Пупкин]

Зачем вам этот секс на flex ?

Не проще как в старые добрые времена...

Comments

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

Таблицами? xDDD

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

На то и придумываются новые спецификации и W3C, чтобы их использовать, а не зависать в своей верстке в 2010 году.

[Александр Пупкин]

а как же староверы? flex еще ведь не во всех браузерах поддерживается... сейчас он сделает на flex, через неделю сделает не на flex...