通过flexbox模拟Bootstrap网格列属性

Question

我有6个不同宽度的徽标，我想在响应式横幅中显示如下：

• 大屏幕上的1行6
• 中等屏幕上的2行3个
• 小屏幕上的3行2

通过在每个徽标元素上分配以下类，可以在引导程序中轻松完成此行为：col-lg-2 col-md-2 col-sm-4

但是，我想使用flexbox在每个徽标之间强制实现一致的间距：

// html
<div class="logo-container">
  <img class="logo"/>
  <img class="logo"/>
  <img class="logo"/>
  <img class="logo"/>
  <img class="logo"/>
  <img class="logo"/>
</div>

// css
.logo-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

这样可以很好地工作，但仅限于桌面视图。一旦我开始缩小屏幕，flex-wrap开始确保徽标保留在容器中，但行中的每行中的徽标数量不会相同。

我最终得到1行5徽标+ 1行1徽标，或1行4徽标+ 1行2徽标。