html - 带有链接自动填充的动态 flexbox 导航

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

The links should automatically fill up from top to bottom and also always have the links vertically aligned in the middle.

* {
  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;
}

<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>