0

As you can see in the code below, I want the logo to be at the most left, the sign in and sign up links at the most right and all other links at the middle.

I've accomplished that by placing an empty <li> with a class of .space that has flex: 1; and acts as a separator. Frankly, it works just like I want it to work, however, it seems really barbaric and I was wondering if I could do that using something that is offered by CSS or flex.

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}
a {
    color: #f1f1f1;
}
html {
    font-size: 16px;
}
body {
    background-color: #fafafa;
    font-family: 'Roboto', sans-serif;
    height: 100%;
    width: 100%;
}
.navigation {
    background-color: #171717;
}
.navigation-ul {
    display: flex;
    align-items: center;
}
.navigation-ul>li:not(.dropdown) {
    padding: 2px 13px 1px 13px;
    font-weight: 500;
    text-align: center;
    font-size: 1em;
    color: white;
    background-color: #151719;
    list-style-type: none;
}
.logo img {
  width: 60px;
  height: 54px;
}
.space {
    flex: 1;
}
<nav class='navigation'>
    <div class="wrapper">
        <ul class="navigation-ul">
            <li class='logo'><img src='https://media.istockphoto.com/photos/red-background-ideal-for-christmas-picture-id152119339?k=6&m=152119339&s=612x612&w=0&h=Xxqd9B1xs5JymJYten1-cm2PESGtjen0evjxaCVOqoc='></li>
            <li class='space'></li>
            <li><a href="#">Images</a></li>
            <li><a href="#">Albums</a></li>
            <li><a href="#">Tags</a></li>
            <li><a href="#">Upload</a></li>
            <li class='space'></li>
            <li><a href="#">Sign In</a></li>
          <li><a href="#">Sign Up</a></li>
        </ul>
    </div>
</nav>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Onyx
  • 5,186
  • 8
  • 39
  • 86
  • I hate bloated markup, but I guess I would just add some classes and put some extra margin around the logo and sign in links. Of course would be nice to separate the nav from the logo, unless that is clickable. – Nateous Aug 28 '18 at 18:55
  • is this relevant for you perhaps? https://stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items – UnpassableWizard Aug 28 '18 at 19:00
  • The extra mark-up is unnecessary nowadays. There are multiple ways to achieve the layout with CSS flex or grid. https://jsfiddle.net/av7dzkyr/15/ – Michael Benjamin Aug 28 '18 at 19:24

0 Answers0