如何在 flexbox 中使用自动边距 [重复]答案

【问题标题】：how use margin auto in flexbox [duplicate]如何在 flexbox 中使用自动边距 [重复]
【发布时间】：2020-12-16 06:16:21
【问题描述】：

我正在制作一个导航栏。但我有问题。我想将 2 个项目重定向到右侧但其中 1 个向右 1 个向中间我不能使用浮动，因为我使用 flexbox 我用谷歌搜索他说使用保证金自动我使用margin auto，但其中一个进入中间我希望他们两个都在他们之间的小范围内正确（链接和联系人）

我的 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;
}

联系人在中间，但我希望联系人像链接一样正确（边距很小）谢谢！！

【问题讨论】：

justify-content: flex-end?

标签： html css flexbox navbar nav

【解决方案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>

【讨论】：

【解决方案2】：

将要移动到右侧的导航栏项目包装在自己的容器中，在本例中为 UL 和 class f-right

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

并添加以下 CSS，这将为容器提供 flex 布局并将其元素向右对齐

.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;
 }

【讨论】：