使用flexbox以相同的高度均匀分布导航项目 [英] Spread nav items equally with the same height using flexbox

问题描述

我有一个导航，其中有许多菜单项.每个菜单项中的文本的长度都不同.

I have a nav which has a number of menu items. The text in each menu item varies in length.

这是它的样子:

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>

这里的问题是，当视口较宽时，每个项目之间会留有很大的间隙.为了解决这个问题，我已经在<li>中添加了width: 100%;，如下所示:

The problem here is that it leaves large gaps between each item when viewport is wide. To fix this, I've added width: 100%; to the <li>, like so:

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中有什么方法可以解决此问题?

This kind of solves the problem, but now the heights are not equal. Is there a way within flexbox to fix this?

推荐答案

您要将flex对齐属性应用于 flex项(容器的子项)，而不是 content在flex项目中(容器的孙子).这就是为什么您看到的物品垂直居中(即失去相等的高度)的原因.

You are applying the flex alignment properties to the flex items (the children of the container), not to the content inside the flex items (the grandchildren of the container). That's why you're seeing the items vertically centered (i.e., losing equal height).

基本上，HTML结构分为三个级别.因此，将项目放入伸缩容器中.现在，flex属性将应用于内容. 这是更完整的说明:在CSS网格中居中

Essentially, there are three levels to the HTML structure. So, make the items into flex containers. Now flex properties apply to the content. Here's a more complete explanation: Centering in CSS Grid

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

Also, since you're using the HTML5, semantically-meaningful <nav> element, there's really no need to also use an unordered list (<ul> / <li>). It's unnecessary and semantically meaningless code.

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>

这篇关于使用flexbox以相同的高度均匀分布导航项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！