如何垂直对齐和拉伸flexbox元素的子子元素？

Question

我目前正在尝试使用Flexbox构建移动导航： 垂直菜单，占用可用高度的100％。导航项均匀放置并占据整个高度。

我使用ul>li>a结构。

问题：

我无法找到办法：

1. 强制<a>获取100％的父li身高
2. 使a的内容垂直对齐。

我做了一个或另一个成功，但似乎我不能同时做到:(

这是我到目前为止得到的一个jsFiddle： http://jsfiddle.net/hopxzcq3/

<nav>
   <ul class="main-nav">
        <li><a href="#">Cat 1</a></li>
        <li><a href="#">Cat 2</a></li>
        <li><a href="#">Cat 3</a></li>
        <li><a href="#">Cat 4</a></li>
        <li><a href="#">Cat 5</a></li>
    </ul>
</nav>

.main-nav {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
}
.main-nav li {
    display:flex;
    flex-grow: 1;
}
.main-nav li a {
    display:block;
    width:100%; height:100%;
}

Answer 1

在锚点而不是flex:1

上使用display:block; width:100%; height:100%;

.main-nav li a 
{ 
    flex:1; /* make the anchor full size*/

    display:flex;  /*these 2 are needed for vertical alignment*/
    align-items: center;
}

Updated fiddle