How can I pull my last flex box child to the right?

March 7, 2023

I’ve got a navbar, and I want to space the links evenly across the bar.
This is my HTML

<nav class="mainAddressBar">
                <ul class='navLinks'>
                    <li class="navItem"><a href="index.html">Home</a></li>
                    <li class="navItem"><a href="about.html">About Us</a></li>
                    <!--<li class="navItem"><a href="portfolio.html">Portfolio</a></li>-->
                    <li class="navItem"><a href="contact.html">Contact</a></li>
                </ul>
            </nav>

CSS:

.navLinks {
    display: flex;
    justify-content: space-between;
    /*padding-left: 10em;*/
}

.navItem {
    flex: 1;
}

.navItem:last-child{
    margin-left: auto;
}

This is the output:
enter image description here

I am wanting the contact button to be all the way to the right.

I have tried splitting the navbar into two sections, with the first two links in one div and the contact link in the second div, and using justify-content:space-around. I’ve always attempted to use

.navItem:last-child{
    margin-left: auto;
}

I have been able to maintain the spacing and move the contact link further right, but not quite where it needs to be.

>Solution :

There is flex:1 on .navItem, the .navItem will fill the container, so the last .navItem is already been push to the right.

You can change text-align or dont set flex:1 on last child.

.navLinks {
  display: flex;
  justify-content: space-between;
  /*padding-left: 10em;*/
}

.navItem:not(:last-child) {
  flex: 1;
}

.navItem:last-child {
  margin-left: auto;
}

<nav class="mainAddressBar">
  <ul class='navLinks'>
    <li class="navItem"><a href="index.html">Home</a></li>
    <li class="navItem"><a href="about.html">About Us</a></li>
    <!--<li class="navItem"><a href="portfolio.html">Portfolio</a></li>-->
    <li class="navItem"><a href="contact.html">Contact</a></li>
  </ul>
</nav>