如何在使用 flexbox (justify-content: space-between /around) 属性创建导

Question

在这里输入图像描述我得到了一个简单的东西... 我正在尝试为我的页脚创建一个简单的导航。所以，我创建了一个并在其中放置了一个。该列表包含三个s

，每个s都有一个内部。我希望我的列表项水平放置，它们之间/周围有空格。因此，我决定在这种情况下使用flexbox。问题是，当我将我的显示属性值设置为弯曲和对齐内容居中时，它可以预测地工作(即所有相互粘附的列表项都水平居中(，但是，一旦我将 justify-content 设置为"间距之间"或"空间周围"，我的内容右侧就会得到一个额外的空间， 这使得这个空间比内容左侧的空间大三倍。 我试图在历史记录中搜索这个主题，但没有找到类似的东西。谷歌搜索给我带来了一个潜在的解决方案 - 为每个列表项设置 flex：1。但在这种情况下，我失去了项目之间的间隙，这不是我的意图。 下面我提供了问题的图片和我的测试代码片段。另一个观察结果是，在代码片段程序(JSFiddle 或代码笔(中一切运行良好...... 问题说明

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.footer {
height: 100vh;
background: grey;
position: relative;
}
.container {
width: 90%;
height: 30vh;
margin: auto;
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
}
.nav {
background: white;
height: 100%;
}
.list {
height: 100%;
list-style-type: none;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.item {
min-width: 30%;
background: grey;
}

<div class="footer">
<div class="container">
<nav class="nav">
<ul class="list">
<li class="item"><a href="">1</a></li>
<li class="item"><a href="">2</a></li>
<li class="item"><a href="">3</a></li>
</ul>
</nav>
</div>
</div>

Answer 1

你的代码片段没问题。不过，在您的屏幕截图中，您似乎有更多的 css 正在进行。

我在您的屏幕截图中看不到完整的 CSS 片段，我可能完全错了：它看起来像是 clearfix-hack 的一部分，您缺少 ：：before 部分。 因为仅在 ：：after 中添加一个空格将具有您所描述的效果。 它可能是以前的浮点构造的残骸，所以你可以删除 ：：after 部分。