html - 使用 flexbox 以相同的高度平均分布导航项

Question

我有一个包含许多菜单项的导航。每个菜单项中的文本长度各不相同。

这是它的样子:

nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin: 0;
  padding: 0;
}

nav ul li {
  background: darkblue;
  list-style: none;
  padding: 24px;
}

a {
  color: #fff;
  text-decoration: none;
}

<nav>
  <ul>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">A Longer Menu Item</a></li>
    <li><a href="#">A Very Very Long Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
  </ul>
</nav>

这里的问题是，当视口(viewport)很宽时，它会在每个元素之间留下很大的间隙。为了解决这个问题，我添加了 width: 100%;到 <li> ，像这样:

nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin: 0;
  padding: 0;
}

nav ul li {
  width: 100%;
  border-right: 3px solid #fff;
  background: darkblue;
  list-style: none;
  padding: 24px;
}

a {
  color: #fff;
  text-decoration: none;
}

<nav>
  <ul>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">A Longer Menu Item</a></li>
    <li><a href="#">A Very Very Long Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
  </ul>
</nav>

这样解决了问题，但是现在高度不相等了。 flexbox 有办法解决这个问题吗？

Answer 1

您正在将 flex 对齐属性应用到 flex 元素(容器的子项)，而不是 flex 元素中的内容(容器的孙项) ).这就是为什么您会看到元素垂直居中(即失去相等的高度)。

基本上，HTML 结构分为三个层次。因此，将元素制作成 flex 容器。现在 flex 属性适用于内容。这里有一个更完整的解释:Centering in CSS Grid

此外，由于您使用的是 HTML5，语义上有意义 <nav>元素，确实没有必要也使用无序列表 ( <ul>/<li> )。这是不必要且语义上无意义的代码。

nav {
  display: flex;
}

a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: darkblue;
  color: #fff;
  text-decoration: none;
}

a + a {
  border-left: 2px solid gray;
}

@media ( max-width: 600px ) {
  nav {
    flex-wrap: wrap;
  }
  a {
    flex-basis: 100%;
  }
  a + a {
    border-left: none;
    border-top: 2px solid gray;
  }
}

<nav>
  <a href="#">Menu Item</a>
  <a href="#">A Longer Menu Item</a>
  <a href="#">A Very Very Long Menu Item</a>
  <a href="#">Menu Item</a>
</nav>

jsFiddle demo