In flexbox css, I am already using justify-content to position the nav elements, how to make space around?

Question

this is a question I have been searching for. I am using justify-content: flex-end already just to have the nav links sit at the end of the main axis. But now I also want to use the space-between property that I usually do to space apart items in a container. The thing is, that I already declared the justify-content with the flex-end value. Is there a more conventional way to do this or have I been doing this wrong the whole time. Please see below for code and picture.

// Nav
import React from "react";


const NavBar = () => {
    return(
        <div>
            <nav>
                <ul className="nav__list">
                    <li className="nav__item">Home</li>
                    <li className="nav__item">About</li>
                    <li className="nav__item">Donate</li>
                </ul>
            </nav>
        </div>
    )
}

export default NavBar;


// CSS

.nav__list {
  color: red;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: space-evenly;
}

Answer 1

You can leave out align-items: space-evenly; because it doesn't do anything in this situation.

To achieve the result you want, you can keep the justify-content: flex-end; to align everything to the right and then give each child (.nav__item) a margin-right except for the last one.

That is what .nav__list > li:not(:last-of-type) does, and it reads as follows: Target every li under the parent element .nav__list, except for (:not) the last of this type ((:last-of-type)).

.nav__list {
  color: red;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.nav__list > li:not(:last-of-type) {
  margin-right: 50px;
}

<div>
    <nav>
        <ul class="nav__list">
            <li class="nav__item">Home</li>
            <li class="nav__item">About</li>
            <li class="nav__item">Donate</li>
        </ul>
    </nav>
</div>