html - 使用填充自动填充剩余高度

Question

我希望我的导航 anchor 的填充是导航中剩余的内容。我已将其设置为 max-height: 90px;。我不想做的是对它们应用固定的填充，例如 padding: 36px 0;。如果不自己调整，我怎么可能实现它？

nav {
  display: flex;
  align-items: center;
  min-height: 90px;
  padding-left: 30px;
  padding-right: 30px;
}

nav a {
  margin: 0 15px;
  background-color: orange;
}

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Answer 1

你必须给出 <nav>一个align-items stretch 的值, 并制作 <a>也用 align-items: center 标记 flex 盒子:

nav {
  display: flex;
  align-items: stretch;
  min-height: 90px;
  padding-left: 30px;
  padding-right: 30px;
}

nav a {
  padding: 0 15px;
  background-color: orange;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>