将包裹的物品居中放置在弹性盒之间的空间中

对于导航部分，我希望它使用space-between理由。对于导航可能需要换行的较小显示器，我希望这些项目能够自行居中，而不是单独排成一行时粘在左侧。

nav {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  justify-content: space-between;
}

<nav>
  <div class='item'>
    Item 1 is alone on its row if the window is small, but is not centered.
  </div>
  <div class='item'>
    Item 2 is very much like item 1.
  </div>
</nav>

代码笔演示： https://codepen.io/anon/pen/MmdOMP?editors=1100#0 https://codepen.io/anon/pen/MmdOMP?editors=1100#0

从我的角度来看，可以有两种解决方案：

1. 使用 CSS 媒体查询或；
2. JS解决方案，解释如下：

当项目被包装时，它需要 100% 宽度，您需要做的是在窗口调整大小事件中检查项目的宽度，如果它相对于父元素为 100%，则意味着它被包装，您可以添加一个类此时，当语句为 false 时将其删除：

function justifyCenter() {
    var navWidth = $("nav").width();
    var itemWidth = $(".item:first-child").width();

    if (navWidth === itemWidth ) {
        $("nav").addClass('justify-center');
    } else {
        $("nav").removeClass('justify-center');
    }
}

代码笔演示： https://codepen.io/anon/pen/WzgpLw https://codepen.io/anon/pen/WzgpLw