One div right, the others centred with flex

Question

I have a menu that looks like this

<div class="page">
  <nav class="page__menu menu">
    <ul class="menu__list r-list">
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Option1</a></li>
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Option2</a></li>
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Option3</a></li>
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Option4</a></li>
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Logout</a></li>
    </ul>
  </nav>
  </div>

I want the first 4 options to be centred and the final one to be on the right side of the navbar. I have tried applying 'margin-right:auto' and 'margin-left:auto' to the final div but it's still not working. Is there a way of doing this without creating 3 different flex boxes, the left one blank?

score 1 · Accepted Answer · answered Oct 25 '20 at 07:22

1

margin-left: auto should work. Try placing it on the first and last list item, like so:

.menu__list {
    display: flex;
}
.menu__group {
    list-style-type: none;
}
.menu__group:first-of-type,
.menu__group:last-of-type {
    margin-left: auto;
}

answered Oct 25 '20 at 07:22

touchmarine

1,548
9
11

score 0 · Answer 2 · answered Oct 25 '20 at 07:34

 ul.menu__list li{
    display:inline;
  }
 a{
   text-decoration:none;
  }
 li:last-child{
    float:right;
  }
 ul.menu__list{
    text-align: center;
  }

<div class="page">
  <nav class="page__menu menu">
    <ul class="menu__list r-list">
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Option1</a></li>
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Option2</a></li>
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Option3</a></li>
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Option4</a></li>
      <li class="menu__group"><a href="" class="menu__link r-link text-underlined">Logout</a></li>
    </ul>
  </nav>
  </div>

I think you are trying to do this

One div right, the others centred with flex

2 Answers2