我有一个导航，其中有许多菜单项。每个菜单项中的文本长度各不相同。
它的外观如下：
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>
这里的问题是，当视口很宽时，它会在每个项目之间留下很大的间隙。为了解决这个问题，我添加了width: 100%; to the <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 中有办法解决这个问题吗？
您正在将 Flex 对齐属性应用到弹性项目（容器的子级），而不是弹性项目内的内容（容器的孙子）。这就是为什么您会看到项目垂直居中（即失去相等的高度）。
本质上，HTML 结构分为三个级别。因此，将物品放入柔性容器中。现在，flex 属性应用于内容。
这是更完整的解释：CSS 网格居中 https://stackoverflow.com/q/45536537/3597276
另外，由于您使用的是 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 演示 https://jsfiddle.net/6e84tk0s/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
