html - 仅使用 flexbox 在宽度受限时使 2 个导航居中

Question

我在同一行上有 2 个 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 作为解决方案。

你有什么建议？

Answer 1

试试这个

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

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

将 space-between 更新为 space-around 并添加了 flex:0 0 auto;在导航上