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

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

我期望的结果是在左边显示第一个无序列表，在同一行的最右边（末端）显示第二个无序列表

.navigation{
显示器：flex；
弯曲方向：行；
列表样式：无；
柔性包装：nowrap；
}
.左导航{
调整内容：灵活启动；
}
.右导航{
证明内容：柔性端；
}
.导航a{
文字装饰：无；
}

菜单

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

关于

flex-wrap

，这里根本没有必要，因为没有太多的内容需要它来包装（或者不需要，取决于你的目的）。这里有一个来自mozilla的示例，演示了

flex-wrap

的使用

justify content

也是需要为整个flex组设置的属性。下面演示如何使用

---

我相信你会希望左边的导航贴在左边，右边的导航贴在右边。在这种情况下，您只需指定

justify content:space-between，正如我前面解释的几句话


.navigation{
显示器：flex；
证明内容：之间的空间；
}


菜单








希望这有帮助，谢谢。这有帮助，但我还有一个问题。rightNav{justify content:flex-end；}不起作用。如果你能解释哪些项目需要显示flexbox属性。因为如果我从无序列表中删除它，它将不再起作用。@Davor flex-end没有做你认为应该做的事情。看看我答案的更新。那么，你想让正确的导航保持在右边吗？啊，我想我现在明白了，每个元素都需要显示：flex；属性来使用flexbox属性，而不仅仅是父属性。对吗？因为添加了display:flex；到.rightNav{justify content:flex end；}工作正常。