html - 在具有固定高度的 Flexbox 导航中拉伸(stretch)元素元素高度

Question

我有一个固定高度的导航，它使用 flexbox 布局模块。它有两个元素(ul 元素)，其中一个我希望它的 li 标签占据导航的所有高度，另一个我希望它的 li 标签表现正常.我认为将 display:block 分配给 li 标签，我希望它们占据导航的所有高度是可行的，但它表现为 display:inline - block 。

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    height: 65px;
}

nav ul {
  list-style-type: none;
  padding-left: 0;
}

nav ul li {
  float: left;
}

nav ul.item1 li {
  display: block;
  background-color: red;
}

nav ul.item2 li {
  display: inline-block;
  background-color: green;
}

<nav>
  <ul class="item1">
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
  </ul>
  <ul class="item2">
    <li>#4</li>
    <li>#5</li>
    <li>#6</li>
  </ul>
</nav>

Answer 1

简短的回答是使用嵌套的 flexbox。

1. 从 nav 中移除 align-items: center;，这样 flex 元素就可以拉伸(stretch)(默认行为)到与容器相同的高度。

2. 通过添加 ul { margin: 0; 重置边距}，所以没有顶部和底部边距。

3. 移除所有的float和inline-block，在flexbox布局中不需要它。

4. 将 display: flex; 应用于所有 - nav、ul 和 li。

5. 最后在 li 中添加 align-items: center; 使文本垂直居中。

nav {
  display: flex;
  justify-content: space-between;
  background-color: black;
  height: 65px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav li {
  display: flex;
  align-items: center;
}

nav ul.item1 li {
  background-color: red;
}

nav ul.item2 li {
  background-color: green;
}

<nav>
  <ul class="item1">
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
  </ul>
  <ul class="item2">
    <li>#4</li>
    <li>#5</li>
    <li>#6</li>
  </ul>
</nav>

更新

修改后的版本仅左侧完全拉伸(stretch)到高度，右侧表现为内联元素。

nav {
  display: flex;
  justify-content: space-between;
  background-color: black;
  height: 65px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav li {
  display: flex;
}

nav ul.item1 li {
  align-items: center;
  background-color: red;
}

nav ul.item2 {
  align-items: center;
}

nav ul.item2 li {
  background-color: green;
}

<nav>
  <ul class="item1">
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
  </ul>
  <ul class="item2">
    <li>#4</li>
    <li>#5</li>
    <li>#6</li>
  </ul>
</nav>