Align my flex items left, middle and right

Question

I wanted the nav bar right at the top, to have the class with left on the left side, the class with middle right in the middle, and the class with right in the right side.

* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

.flex-container {
  width: 100%;
}

.flex-container ul {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-container li {
  border: 1px solid red;
}

.flex-container nav ul .nytl {
  width: 189px;
  height: 26px;
}

.flex-container nav ul .first {
  justify-content: flex-start;
}

hr {
  margin-top: 10px;
}

<div class="flex-container">
  <nav>
    <ul>
      <li class="left">
        <a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
        </a>
      </li>
      <li class="left">
        <a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
        </a>
      </li>
      <li class="left"><a href="#">SPACE & COSMOS</a>
      </li>
      <li class="middle"><img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl"></li>
      <li class="right"><button>Subscribe</button> .
      </li>
      <li class="right"><button>Login</button></li>
    </ul>
  </nav>
  <hr>
</div>

Michael Benjamin · Accepted Answer · 2019-04-15T01:23:03.733

Try using auto margins to push the left and right elements away from the middle element.

(Also, since you're using the HTML5 nav element and CSS3 properties, you really don't need a ul to structure your layout. You can simplify your code substantially.)

nav {
  display: flex;
  align-items: center;
}

nav > * {
  border: 1px solid red;
}

.nytl {
  margin: 0 auto;
  width: 189px;
  height: 26px;
}

hr {
  margin-top: 10px;
}

* {
  padding: 0;
  margin: 0;
}

<nav>
  <a href="#">
    <img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
  </a>
  <a href="#">
    <img src="https://img.icons8.com/material-rounded/16/000000/search.png">
  </a>
  <a href="#">SPACE & COSMOS</a>
  <img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
  <button>Subscribe</button>
  <button>Login</button>
</nav>
<hr>

Learn more about auto margins here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Here's another flex method you may find useful:

Aligning Three Divs Horizontally Using Flexbox

You may encounter another problem now: Because flex features such as auto margins, justify-content and align-items work by distributing free space, your middle item may not be perfectly centered. See these posts for more details and solutions:

score 0 · Answer 2 · answered Apr 15 '19 at 06:27

I would utilise the space-between option that flex brings with the justify-content property. You have to be careful of the way the code is listed for SEO purposes as opposed to placing anywhere and have the css reposition it all. It should cascade in natural order first.

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

.flex-thirds .col {
  width: 32%;
}

.nytl {
  margin: 0 auto;
  width: 189px;
  height: 26px;
}

<div class="flex-thirds">
  <div class="col">
    <a href="#"><img src="https://img.icons8.com/material-outlined/16/000000/menu.png">
    </a>
    <a href="#"><img src="https://img.icons8.com/material-rounded/16/000000/search.png">
    </a>
    <a href="#">SPACE & COSMOS</a>
  </div>
  <div class="col">
    <img src="https://lco1220.github.io/nyt_article/images/nyt-logo.png" alt="NewYorkTimes-Logo" class="nytl">
  </div>
  <div class="col">
    <button>Subscribe</button>
    <button>Login</button>
  </div>
</div>

You can find more about justify-content here at css-tricks

Align my flex items left, middle and right

2 Answers2