Question

我在同一行上有2个nav。一个在左边，另一个在右边。

在空间不足时，我想使两个导航都居中，并占据容器的整个宽度。

看一个例子：

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>

将空格之间的距离更新为空格，并添加了flex：0 0 auto;在导航上

仅使用flexbox限制宽度时，使2个导航居中

1 个答案: