html – Flexbox – 在同一行左右对齐

概述情况： 我有一个简单的导航栏,我正在Flexbox中建立.我想把一个项目放在左边,让别人把它挂在右边. 例： <nav> <ul class="primary-nav"> <li><a href="#" id="item1">ListItem1</a></li> <li><a href="#" id="item2">ListItem2</a></li> <li><a h 情况：

我有一个简单的导航栏,我正在FlexBox中建立.我想把一个项目放在左边,让别人把它挂在右边.

例：

<nav>  <ul >    <li><a href="#" ID="item1">ListItem1</a></li>    <li><a href="#" ID="item2">ListItem2</a></li>    <li><a href="#" ID="item3">ListItem3</a></li>    <li><a href="#" ID="item4">ListItem4</a></li>  </ul></nav>

问题

通常答案只涉及浮动项目左右,但据称在FlexBox中使用浮动是不好的.我正在考虑使用合理内容,并使用flex-start和flex-end,但是这并没有太好的工作.

我尝试应用flex-start到第一个项目,然后flex-end到其他,但没有这么好的工作.

像这样：

.primary-nav #item1 {  justify-content: flex-start;}.primary-nav #item2 {  justify-content: flex-end;}.primary-nav #item3 {   justify-content: flex-end; }.primary-nav #item4 {    justify-content: flex-end;    }

赞美和感谢任何具有FlexBox技能的人,并能帮助我找到正确的方式来处理这种情况. 总结

以上是内存溢出为你收集整理的html – Flexbox – 在同一行左右对齐全部内容，希望文章能够帮你解决html – Flexbox – 在同一行左右对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。