Vertically center link text in flexbox layout - css

Question

I have a menu made up of 5 links. I need each link to be 33% of the available width with spacing between the links. The horizontal and vertical spacing must be the same.
Links must be the same height as the tallest link in there row, even though the length of the link text will vary per link. Ideally all links would be the same height but I doubt this is possible.
The link text is dynamic and will change. This for a responsive website so the page width will vary.
I cant change the HTML at all.
This is for a mobile only website so I dont need to worry about older browsers. I should be fine to use flexbox.
<ul>
<li>
<a href="#">
<span>Link 1</span>
</a>
</li>
<li>
<a href="#">
<span>Link 2 has much longer text than the other links</span>
</a>
</li>
<li>
<a href="#">
<span>Link 3</span>
</a>
</li>
<li>
<a href="#">
<span>Link 4</span>
</a>
</li>
<li>
<a href="#">
<span>Link 5</span>
</a>
</li>
</ul>
My code below works fine in Chrome. The only thing I still need to do is vertically center the link text (see the image below).
The align-items: center property looked promising however If I apply it to the ul then the lis' stop being the same height.
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
width: 50%;
border: 2px solid black;
margin: auto;
}
li {
list-style-type: none;
float: left;
width: 32%;
background: grey;
text-align: center;
overflow: hidden;
margin-bottom: 2%;
vertical-align: middle;
}
li:nth-of-type(2),
li:nth-of-type(5)
{
margin-left: 2%;
margin-right: 2%;
}
a {
display: inline-block;
margin: -10em;
padding: 10em;
}
a {
background: gold;
}
a:hover {
background: green;
}
http://codepen.io/anon/pen/CeiqK

Answer 1

I don't know if this solution that I post here will be valid for you. Anyway, I changed your css a bit to get it:
ul {
margin: 0;
padding: 0;
width: 50%;
border: 2px solid black;
margin: 0 auto;
font-size: 0; /* this fix inline-block margins */
}
li {
font-size: 14px;
list-style-type: none;
display: inline-block;
width: 32%;
min-height: 34px;
background: grey;
text-align: center;
overflow: hidden;
margin-bottom: 2%;
}
a {
display: table-cell;
width: 100em;
height: 34px;
vertical-align: middle;
}
Check it at codepen
Creates this: