Html CSS Flexbox-使用flex wrap和flex grow属性时元素之间的间距

我正在使用CSS flexbox进行基于网格的导航，该导航行中有3列，网格中没有行。基于父容器宽度（即100%）计算的网格子对象的宽度

我设置

右边距：10px和
页边距底部：10px对于我为
右边距设置的
0px
网格子项的每三分之一，强制网格子项位于父容器的右边缘

如果列中的a除以3，则一切正常。（即每行3列）

这里的问题是，如果最后一行只有2列，那么网格和网格子级之间就有
10px
空间

是否有任何可能的解决方案来清除剩余的空间

为了更好地理解，请查找以下代码笔链接：

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>

.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;
  }
}

问题：

<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>

.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”个菜单正在动态地添加到菜单包装器中。
只需在最后一个子菜单中添加
右边距：0
，即可删除此空格：

.menu-wrapper .menu:last-child {
    margin-right: 0;
}

这在任何情况下都有效：


如果你已经有了3，那么它已经是0了
如果您有一个或两个，它将删除不需要的空间


最后一行有1项的完整代码：


。菜单包装器{
宽度：100%；
身高：100%；
显示器：flex；
柔性包装：包装；
边际：0px；
}
.菜单包装器.菜单{
显示：内联块；
边框：实心1px#ccc；
利润率：0 10px 10px 0；
柔性生长：1；
宽度：钙（33%-10px）；
}
.菜单包装器.菜单：第n个子项（3n），
.菜单包装器.菜单：最后一个子菜单{
右边距：0；
}
.菜单包装器.菜单图标{
文本对齐：居中；
}
.菜单包装器.菜单名称{
宽度：80%；
保证金：0自动；
文本对齐：居中；
}

文本

文本

文本

文本

文本

文本

文本

非常感谢+1对于解决方案，是否有可能实现上述代码的动画/过渡。。（即）如果我点击任何一个孩子。。剩下的孩子需要躲起来。。然后单击要设置动画的网格，以填充整个父网格的宽度和高度。。具有确切的变形起源。（如果我们点击第三个，它应该从右到左设置宽度和高度的动画）。我试着提出了以下几点。。。但它与android移动应用程序抽屉图标不同。。（在Android mobile中，如果您单击应用程序抽屉图标，它将显示子项）…如果没有flex codepen link@Yesvinkumar，您将尝试使用不适合动画的显示属性。我认为你要考虑使用绝对位置，并使用顶部/左/右/底部拉伸元素，使之成为全宽度，并用高Z指数，你会隐藏另一个，所以不需要隐藏它们。