how use margin auto in flexbox

Question

I'm making a navbar. but I have problem. I want to redirect 2 items to the right but 1 of them go right 1 of them go middle I cant use float because I use flexbox I search to google He say use margin auto I use margin auto but one of them go middle I want both of them go right with small margin between them (link & contacts)

my HTML code:

<!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>

my CSS code :

* {
    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;
}

contacts go middle but I want contact go right like link (with small margin) Thanks !!

justify-content: flex-end? – backward forward Dec 16 '20 at 06:27 — backward forward, Dec 16 '20 at 06:27

score 0 · Accepted Answer · answered Dec 16 '20 at 06:30

If i understand you correctly, try smth like this:

* {
    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>

score 0 · Answer 2 · answered Dec 16 '20 at 06:41

Wrap the navbar items that you want to move to the right in their own container, in this case the UL with class f-right

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

And add the following CSS that will give the container a flex layout and justify it's elements to the right

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

how use margin auto in flexbox

2 Answers2