CODEWITHSUNDEEP
htmlcssflexbox
Christopher Altamirano
Christopher Altamirano

Reputation: 157

Align my flex items left, middle and right

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>

Upvotes: 0

Views: 308

Answers (2)

Lee Sheppard
Lee Sheppard

Reputation: 11

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

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371231

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:

Here's another flex method you may find useful:

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:

Upvotes: 4

Related Questions