html - 尝试使用 flexbox 在同一行显示两个无序列表

Question

无论我更改什么，它总是显示在两行上。在没有 flexbox 的情况下，可能有一种更简单的方法可以做到这一点，但我想学习如何使用 flexbox 属性来做到这一点。

我想要的结果是在同一行的左侧显示第一个无序列表，在最右侧(末尾)显示第二个。

.navigation ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  flex-wrap: nowrap;
}

.leftNav {
  justify-content: flex-start;
}

.rightNav {
  justify-content: flex-end;
}

.navigation a {
  text-decoration: none;
}

<header>
  <nav class="navigation">
    <div class="leftNav">
      <ul>
        <li>Menu</li>
        <li><a href="">One</a></li>
        <li><a href="">Two</a></li>
        <li><a href="">Three</a></li>
      </ul>
    </div>
    <div class="rightNav">
      <ul>
        <li><a href="">My Account</a></li>
        <li><a href="">Login</a></li>
      </ul>
    </div>
  </nav>
</header>

Answer 1

看起来只是将导航声明为 flex 元素就可以了，没有任何进一步的 flex 设置。值得注意的是，它以这种方式运行，因为行方向是默认方向。

关于 flex-wrap，这里根本没有必要，因为它不会包装(或不会包装，取决于您的目标)的内容不多。这是一个 nice pic来自 mozilla，演示了 flex-wrap 的使用。

justify-content 也是需要为整个 flex 组设置的属性。这是 the pic演示使用。

---

我相信您希望左侧导航固定在左侧，右侧导航固定在右侧。在这种情况下，您只需指定 justify-content: space-between;，正如我之前解释的几句话一样。

.navigation{
  display:flex;
  justify-content: space-between;
}

 <nav class="navigation">
    <div class="leftNav">
      <ul>
       <li>Menu</li>
       <li><a href="">One</a></li>
       <li><a href="">Two</a></li>
       <li><a href="">Three</a></li>
      </ul>
    </div>
    <div class="rightNav">  
      <ul>
       <li><a href="">My Account</a></li>
       <li><a href="">Login</a></li>
      </ul>
    </div>
  </nav>