Html 使用flexbox将导航栏中的li拆分到不同的侧面

我正在尝试设置导航栏，以便在左侧显示github和linkedin imgs/链接，但我想在右侧保留bio/公文包/联系人链接

我在导航上使用flexbox，但我不确定是否可以拆分此ul，以便lis位于不同的侧面

我在nav上使用flexbox，但我不确定是否可以拆分此ul，使lis位于不同的侧面，因为我有“证明内容：上下之间的空间”

我不知道我应该做什么改变才能让这一切顺利进行

小提琴：

nav{
背景色：#265B8B；
高度：60px；
颜色：白色；
位置：固定；
排名：0；
左：0；
右：0；
宽度：100%；
显示器：flex；
证明内容：之间的空间；
}
导航p{
字体大小：粗体；
左边距：1米；
颜色：白色；
文本对齐：左对齐；
边缘顶部：1.25em；
字号：1em；
}
导航a{
颜色：白色；
字号：1em；
字体大小：粗体；
}
导航ul{
边缘底部：5em；
显示器：flex；
边缘顶部：1.25em；
}
李海军{
列表样式：无；
右边距：1米；
}
nav li.github{
左边距：自动；
}
导航img{
宽度：25px；
高度：25px；
右边距：10px；
}
.菜单切换{
位置：绝对位置；
填充：0.8 em；
顶部：1米；
右：1em；
光标：指针；
}

史蒂文·康

这里是最新版本

史蒂文·康

这里是最新版本

史蒂文·康

嘿，丹尼斯，我完全忘了在css中添加导航元素的代码。我认为这也必须改变，以使一切都能正常工作，因为添加更改不会移动任何东西。更新了我上面的答案。嘿，丹尼斯，我完全忘了添加我放在css中nav元素上的代码。我认为这也必须改变，以使一切工作，因为添加您的更改不会移动任何东西。更新了我的答案上面。

nav {
    background-color: #265B8B;
    height:60px;
    color: white;
    position: fixed;
    top:0;
    left:0;
    right:0;
    width: 100%;
    display: flex;
}

nav p {
    font-weight: bold;
    margin-left: 1em;
    color: white;
    text-align: left;
    margin-top:1.25em;
    font-size: 1em;
}

nav a {
    color: white;
    font-size: 1em;
    font-weight: bold;
}

nav ul {
    flex: 1;
    margin-bottom: 5em;
    display: flex;
    flex-direction: row-reverse;
    margin-top: 1.25em;
}

nav li {
    list-style: none;
    margin-right: 1em;
}

nav li.linkedin {
  margin-right: auto;
}

nav img {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.menu-toggle {
    position: absolute;
    padding: 0.8 em;
    top: 1em;
    right: 1em;
    cursor: pointer;
}

    <nav>
        <p>STEVEN KANG</p>
        <ul>
            <li class="rightLinks contact"><a data-scroll-target="contact">Contact</a></li>
            <li class="rightLinks"><a data-scroll-target="projects">Portfolio</a></li>
            <li class="rightLinks"><a data-scroll-target="bio">Bio</a></li>
            <li class="leftLinks linkedin"><a href="https://www.linkedin.com/in/stevenkangj" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png"></a></li>
            <li class="leftLinks github"><a href="https://github.com/skang28" target="_blank"><img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"></a></li>
         </ul>
        <div class="menu-toggle">
            <a href="javascript:void(0);" class="icon"><i class="fa fa-bars"></i></a>
        </div>
    </nav>