【发布时间】：2023-03-28 08:34:02
【问题描述】：
我正在使用 CSS flexbox 进行基于网格的导航，它在行中有 3 列，在网格中没有“n”行。根据父容器宽度计算的grid-child的宽度（即100%）。
我为每个第三个网格子设置了margin-right:10px; 和margin-bottom:10px;，我为margin-right 设置了0px，以强制网格子位于父容器的右边缘。
如果列均除以 3（即每行 3 列），则一切正常。
这里的问题是，如果最后一行只有 2 列，那么我们在 grid 和 grid-child 之间有10px 空间。
是否有任何可能的解决方案来摆脱剩余空间。
请找到以下 codepen 链接以更好地理解： https://codepen.io/yesvin/pen/xXwBqa
HTML 代码块：
<div class="menu-wrapper">
<div class="menu">
<div class="menu-icon">
<img src="http://via.placeholder.com/80x80"/>
</div>
<div class="menu-name">
<p>Txt</p>
</div>
</div>
<div class="menu">
<div class="menu-icon">
<img src="http://via.placeholder.com/80x80"/>
</div>
<div class="menu-name">
<p>Txt</p>
</div>
</div>
<div class="menu">
<div class="menu-icon">
<img src="http://via.placeholder.com/80x80"/>
</div>
<div class="menu-name">
<p>Txt</p>
</div>
</div>
<div class="menu">
<div class="menu-icon">
<img src="http://via.placeholder.com/80x80"/>
</div>
<div class="menu-name">
<p>Txt</p>
</div>
</div>
<div class="menu">
<div class="menu-icon">
<img src="http://via.placeholder.com/80x80"/>
</div>
<div class="menu-name">
<p>Txt</p>
</div>
</div>
<div class="menu">
<div class="menu-icon">
<img src="http://via.placeholder.com/80x80"/>
</div>
<div class="menu-name">
<p>Txt</p>
</div>
</div>
<div class="menu">
<div class="menu-icon">
<img src="http://via.placeholder.com/80x80"/>
</div>
<div class="menu-name">
<p>Txt</p>
</div>
</div>
<div class="menu">
<div class="menu-icon">
<img src="http://via.placeholder.com/80x80"/>
</div>
<div class="menu-name">
<p>Txt</p>
</div>
</div>
</div>
CSS 代码块：
.menu-wrapper {
width:100%;
height:100%;
display: flex;
flex-wrap:wrap;
margin:0px;
.menu {
display: inline-block;
border:solid 1px #ccc;
margin:0 10px 10px 0;
flex-grow: 1;
width: calc(33% - 10px);
}
.menu:nth-child(3n) {
margin-right:0;
}
.menu-icon {
text-align:center;
}
.menu-name {
width:80%;
margin:0 auto;
text-align:center;
}
}
问题：
必填结果
提前致谢。
注意： 通过将每一行拆分为单独的 flexbox 样式，可以实现类似的效果。但是，我不想要那个，因为'n'不。的菜单动态附加到菜单包装内。
【问题讨论】：