CSS flexbox centering

Question

I have the following code snippet (only HTML and CSS)

.container {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0;
}

nav ul li {
  list-style: none;
  padding: 0 5px;
}

<div class="container">
  <nav class="menu1">
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </nav>

  <nav class="menu2">
    <ul>
      <li>2.1</li>
      <li>2.2</li>
      <li>2.3</li>
      <li>2.4</li>
      <li>2.5</li>
      <li>2.6</li>
      <li>2.7</li>
      <li>2.8</li>
      <li>2.9</li>
    </ul>
  </nav>

  <nav class="menu3">
    <ul>
      <li>3.1</li>
      <li>3.2</li>
      <li>3.3</li>
      <li>3.4</li>
      <li>3.5</li>
      <li>3.6</li>
      <li>3.7</li>
      <li>3.8</li>
      <li>3.9</li>
    </ul>
  </nav>
</div>

As you notice, the middle menu (the nav with class .menu2) is equally spaced between .menu1 and .menu3 because of the CSS property justify-content: space-between; in .container. This is correct.

What I need however, is to make sure that .menu2 is in the center of .container. In other words, it will NOT be equally spaced between .menu1 and .menu3. I want it dead center inside .container (and do not worry about menu items overlapping; I will have less menu items in each menu, so they will not overlap. I just added a lot of them here to demonstrate the spacing issue). Also, .menu1 should be also left aligned, and .menu3 should be right aligned (as they are right now).

How do I do that?

Thanks.

Answer 1

it seems like a grid would be better than a flex in my opinion. you can then change the initial and last ul to display: inline-flex then, for the last ul to be aligned to the end, you add to its nav element (class='menu3') a property text-align=end

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid black;
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0;
}

.menu1 ul{
    display: inline-flex;
}

.menu3{
    text-align: end;
}
.menu3 ul{
    display: inline-flex;
}

nav ul li {
  list-style: none;
  padding: 0 5px;
}