将空间中的物品包裹在flexbox之间

Question

对于导航部分,我希望它使用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>

Codepen演示: https ://codepen.io/anon/pen/MmdOMP ？edit = 1100#0

Answer 1

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

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');
    }
}

Codepen 演示： https://codepen.io/anon/pen/WzgpLw