仅使用flexbox限制宽度时,居中进行两次导航

我有两个 nav 他在同一条线上。一个在左边,另一个在右边。

当空间不足时,我想进行两种导航 居中的 取容器的全宽。

请看一个例子:

https://codepen.io/anon/pen/yxeoeK

html:

<div class="nav-mixed">
  <nav class="first">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </nav>
   <nav class="second">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </nav>
</div>

css:

body{
  background-color:yellow;
}
.nav-mixed{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
nav{
  background-color:grey;
  width:600px
}

使用@media查询很容易,但我只想将flexbox用作解决方案。

你推荐什么?