如何在 flexbox 中使用 margin auto

Question

我正在制作导航栏。但我有问题。我想将 2 个项目重定向到右侧但是其中 1 个向右，其中 1 个向中间我不能使用 float 因为我使用 flexbox 我搜索 google 他说使用 margin auto 我使用 margin auto 但其中一个在中间我希望他们都向右走，他们之间的差距很小（link & contacts）

我的HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>try making site</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">

</head>

<body>
    <nav>
        <ul>
            <li class="active"><a href="#"> Home </a></li>
            <li>
                <a href="#">projects <i class="fas fa-caret-down"></i></a>
                <ul>
                    <li><a href="#">open source</a></li>
                    <li><a href="#">close source</a></li>
                </ul>
            </li>
            <li><a href="#"> CV </a></li>
            <li class="f-right"><a href="#"> Contacts </a></li>
            <li class="f-right"><a href="#">links</a></li>
        </ul>
    </nav>



    <script src="node_modules/@fortawesome/fontawesome-free/js/all.js"></script>
</body>

</html>

我的CSS代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    background: #F8F8F8;
}

nav > ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

nav > ul > li {
    padding: 20px 20px;
    position: relative;
}
nav > ul > li > a{
    font-family: sans-serif;
    font-size: 1.25em;
    text-decoration: none;
    color: #777;
}

nav > ul > li > a:hover {
    color: #333;
}

nav > ul > .active > a{
    color: #555;
}
nav > ul > .active{
    background: #D5D5D5;
}

nav > ul > li > ul {
    display: none;
    position: absolute;
    list-style: none;
    top: 4.2vh;
    left: 0px;
    width: 103%;
    text-align: center;
}
nav > ul > li:hover > ul, nav >ul > li > ul:hover {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
nav > ul > li > ul > li > a {
    text-decoration: none;
    font-family: sans-serif;
    color: #777;
}

nav > ul > li > ul > li > a:hover {
    color: #333;

}

nav > ul > li > ul > li {
    padding: 1vh 0.75vh;
    background: #F8F8F8;
}
.f-right {
    margin-left: auto;
    margin-right: 20px;
}

联系人走中间，但我希望联系人像 link 一样走右（边距小）谢谢！！

Answer 1

如果我没理解错的话，试试这个：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    background: #F8F8F8;
}

nav > ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

nav > ul > li, nav > ul > div > li {
    padding: 20px 20px;
    position: relative;
}
nav > ul > li > a, nav > ul > div > li > a {
    font-family: sans-serif;
    font-size: 1.25em;
    text-decoration: none;
    color: #777;
}

nav > ul > li > a:hover {
    color: #333;
}

nav > ul > .active > a{
    color: #555;
}
nav > ul > .active{
    background: #D5D5D5;
}

nav > ul > li > ul {
    display: none;
    position: absolute;
    list-style: none;
    top: 4.2vh;
    left: 0px;
    width: 103%;
    text-align: center;
}
nav > ul > li:hover > ul, nav >ul > li > ul:hover {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
nav > ul > li > ul > li > a {
    text-decoration: none;
    font-family: sans-serif;
    color: #777;
}

nav > ul > li > ul > li > a:hover {
    color: #333;

}

nav > ul > li > ul > li {
    padding: 1vh 0.75vh;
    background: #F8F8F8;
}
.f-right {
    display: flex;
    margin-left: auto;
    margin-right: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>try making site</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css">

</head>

<body>
    <nav>
        <ul>
            <li class="active"><a href="#"> Home </a></li>
            <li>
                <a href="#">projects <i class="fas fa-caret-down"></i></a>
                <ul>
                    <li><a href="#">open source</a></li>
                    <li><a href="#">close source</a></li>
                </ul>
            </li>
            <li><a href="#"> CV </a></li>
            <div class="f-right">
              <li><a href="#">Contacts</a></li>
              <li><a href="#">links</a></li>
            </div>
        </ul>
    </nav>



    <script src="node_modules/@fortawesome/fontawesome-free/js/all.js"></script>
</body>

</html>

Answer 2

将您想要向右移动的导航栏项目包裹在它们自己的容器中，在本例中为 UL 和 class f-right

<ul class="f-right">
    <li><a href="#"> Contacts </a></li>
    <li><a href="#">links</a></li>
</ul>

并添加以下内容CSS，这将为容器提供灵活的布局并使其元素向右对齐

.f-right {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    list-style: none;
    display: flex;
}

.f-right > li {
    padding: 20px 20px;
}

.f-right > li > a {
    font-family: sans-serif;
    font-size: 1.25em;
    text-decoration: none;
    color: #777;
 }

如何在 flexbox 中使用 margin auto

how use margin auto in flexbox

html

css

flexbox

navbar

nav