Question 46126 in CSS Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    You can try “text-align: right;” in that last child.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search