FlexBox aligning items

Question

I'm trying to align the 6th, 7th, 8th, 9th items in the flex container to get this:

[1th 2th 3th 4th 5th.............6th 7th 8th 9h].

I was trying with margin-right: auto but it doesn't work for a group of items.

.upper_nav ul {
  display: flex;
  display: -webkit-flex;
  list-style-type: none;
}

.upper_nav li a {
  display: block;
  text-decoration: none;
  padding: 0.6em;
  font-size: 0.8em;
  color: #4d4d4d;
}

<nav class="upper_nav">
  <ul>
    <li><a href="#Clients.html">Individual Clients</a></li>
    <li><a href="#Companies">Companies</a></li>
    <li><a href="#Corporations.html">Corporations</a></li>
    <li><a href="#VIP.html">VIP</a></li>
    <li><a href="#Private Banking.html">Private Banking</a></li>

    <li><a href="#EN">EN</a></li>
    <li><a href="#Order via Internet">Order via Internet</a></li>
    <li><a href="#Contact">Contact</a></li>
    <li><a href="#Sign in">Sign in</a></li>
  </ul>
</nav>

My full code is here: https://codepen.io/mario1982/pen/wrELoB

https://stackoverflow.com/a/33856609/3597276 – Michael Benjamin Oct 14 '17 at 18:03 — Michael Benjamin, Oct 14 '17 at 18:03

score 1 · Answer 1 · answered Oct 14 '17 at 15:51

You could split the navigation into two parts and add flexbox properties on the container to separate them. If you want to add items to the menu in the future you won't have to worry about nth-child causing problems.

.upper_nav {
  display: flex;
  justify-content: space-between;
}

.upper_nav ul {
  display: flex;
  display: -webkit-flex;
  list-style-type: none;
}

.upper_nav li a {
  display: block;
  text-decoration: none;
  padding: 0.6em;
  font-size: 0.8em;
  color: #4d4d4d;
}

<nav class="upper_nav">
  <ul>
    <li><a href="#Clients.html">Individual Clients</a></li>
    <li><a href="#Companies">Companies</a></li>
    <li><a href="#Corporations.html">Corporations</a></li>
    <li><a href="#VIP.html">VIP</a></li>
    <li><a href="#Private Banking.html">Private Banking</a></li>
  </ul>
  <ul>
    <li><a href="#EN">EN</a></li>
    <li><a href="#Order via Internet">Order via Internet</a></li>
    <li><a href="#Contact">Contact</a></li>
    <li><a href="#Sign in">Sign in</a></li>
  </ul>
</nav>

score 0 · Answer 2 · answered Oct 14 '17 at 15:22

0

Yeah it was easy, the 6th item should get "margin-left: auto", and that's all.

answered Oct 14 '17 at 15:22

steppenwolf

109
2

also could do `div:nth-child(6n) { margin-left: auto; }` – Mehrad Oct 14 '17 at 15:28
The `margin-right: auto` will also work, when put on the 5th item – Asons Oct 14 '17 at 18:59

FlexBox aligning items

2 Answers2