动态弹性框导航，链接自动填充

Question

我正在尝试根据标题的高度进行动态Flexbox导航。链接应自动从上到下填充，并且始终在中间垂直对齐链接。我知道这是可能的，我已经尝试过但却失败，因为我知道我还没有掌握过Flexbox。

HTML：

<header id="header">
  <div class="row collapse align-middle">
    <div class="medium-2 column" id="logo">
      <a href="https://domain.com">Logo Text</a>
    </div>

    <div class="medium-10 nav-wrap column">
      <nav class="nav-container">
        <ul class="menu">
          <li><a href="/home">Hem</a></li>

          <li><a href="/contact/">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

CSS：

#header {
  height: 100px;
  background: #f00;
  display: flex;
}
#header > .row {
  padding: 0 20px;
  flex: auto;
}
#header .menu {
  justify-content: flex-end;
  display: flex;
  flex-wrap: wrap;
}
#header .menu li {
  flex: 0 1 auto;
  list-style: none;
}
#header .menu li a {
  font-size: 16px;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 20px;
}

这是我想要完成的图像。请注意，红色区域为<a>元素。我想这样做而不使用padding-top和padding-bottom而是使用flexbox。

这是关于jsfiddle的代码： https://jsfiddle.net/Ludx4baj/

如果有人可以帮助我，那将非常感激。

Answer 1

  

链接应自动从上到下填充，并且始终在中间垂直对齐链接。

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
header {
  height: 100px;
  display: flex;
  justify-content: center;
}
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  border: 1px solid grey;
}
ul {
  list-style-type: none;
  margin: 0;
  flex: 1;
  border: 1px solid orange;
}
a {
  text-decoration: none;
  color: red;
  text-transform: uppercase;
}
ul {
  display: flex;
  height: 100%;
  justify-content: space-around;
  padding: 0;
}
li {
  flex: 1;
  display: flex;
}
a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: lightgrey;
  border: 1px solid green;
}

＆＃13;

<header>
  <div class="logo">
    <h2>Logo Text</h2>
  </div>
  <ul>
    <li><a href="#">item 1</a>
    </li>
    <li><a href="#">item 2</a>
    </li>
    <li><a href="#">item 3</a>
    </li>
    <li><a href="#">item 4</a>
    </li>
    <li><a href="#">item 5</a>
    </li>
  </ul>
</header>

＆＃13;

＆＃13;

＆＃13;