在具有固定高度的Flexbox导航中拉伸项目元素的高度

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

只需将height: 100%添加到ul和li中。

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

nav ul {
  list-style-type: none;
  padding-left: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

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

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

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>

Answer 2

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

1. 从align-items: center;移除nav，以便伸缩项目可以拉伸（默认行为）到与容器相同的高度。

2. 通过添加ul { margin: 0; }来重新设置边距，这样就没有顶部和底部边距。

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

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

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

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>

更新

仅左侧的修改版本会完全拉伸到高度，而右侧则作为嵌入式元素。

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>