Flexbox: How to align logo and navbar inline pushed to opposite directions

Question

I am trying to align the logo and the nav on the same line. The logo is to be on the left of window and the navigation is to be on the right of the window using flexbox.

So far I the logo and navbar appear on the same line (except the last li item in 906px). And they are not on opposite ends.

    /* Desktop */
    @media (min-width: 900px) {  
     .logo-name {   
      display: inline-flex;
      background-color: orange;  
     }    
     .main-nav {
      display: inline-flex;
      width: 40%; 
      justify-content:flex-end;
      background-color: blue;   
     }
    }

     <header class="main-header">
     <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1
 
      <nav class="main-nav">
        <li class="nav-item-1"><a href="#">home</a></li>
       <li><a href="#">services</a></li>
       <li><a href="#">gallery</a></li>
       <li><a href="#">about us</a></li>
       <li><a href="#">contact</a></li>
       <li><a href="#">FREE QUOTE</a></li>
      </nav>
     </header>

Any ideas?

score 0 · Answer 1 · answered May 23 '17 at 08:02

When aligning and item you should use align-self and when your are aligning children to a element you should use justify-content.

So by changing to

@media (min-width: 900px) {  
    .logo-name {   
        display: inline-flex;
        background-color: orange;       
    }    
    .main-nav {
        display: inline-flex;
        width: 40%; 
        align-self: flex-end;
        background-color: blue;   
    }
}

You can ream more about it here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-14

score 0 · Answer 2 · answered May 23 '17 at 08:03

.main-header is the parent of .logo-name and .main-nav. You should set display: flex and justify-content: space-between onto parent, in this case .main-header as follows:

/* Desktop */
/*@media (min-width: 900px) { 
  .main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
    .logo-name {   
        background-color: orange;       
    }    
    .main-nav {
        display: flex;
        width: 40%; 
        background-color: blue;   
    }
}*/

  .main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
    .logo-name {   
        background-color: orange;       
    }    
    .main-nav {
        display: flex;
        width: 40%; 
        background-color: blue;   
    }

 <header class="main-header">
   <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>

        <nav class="main-nav">
            <li class="nav-item-1"><a href="#">home</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">about us</a></li>
            <li><a href="#">contact</a></li>
            <li><a href="#">FREE QUOTE</a></li>
        </nav>
    </header>

score 0 · Answer 3 · answered May 23 '17 at 08:03

flex model has an effect within the box. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You may also want use the flex model on header :

header {
  display:flex;
  justify-content:space-between;    
}

/* Desktop */

@media (min-width: 900px) {
  header {
    display: flex;
    justify-content: space-between;
  }
  .logo-name {
    display: inline-flex;
    background-color: orange;
  }
  .main-nav {
    display: inline-flex;
    width: 40%;
    justify-content: flex-end;
    background-color: blue;
  }
}

<header class="main-header">
  <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>

  <nav class="main-nav">
    <li class="nav-item-1"><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">FREE QUOTE</a></li>
  </nav>
</header>

or use text-align & text-align-last while children are inline boxes (inline-flex).

header {
  text-align:justify;
  text-align-last:justify;
}

/* Desktop */

@media (min-width: 900px) {
  header {
    text-align: justify;
    text-align-last: justify;
  }
  .logo-name {
    display: inline-flex;
    background-color: orange;
  }
  .main-nav {
    display: inline-flex;
    width: 40%;
    justify-content: flex-end;
    background-color: blue;
  }
}

<header class="main-header">
  <h1 class="logo-name"><a href="index.html">R.J Roofer</a></h1>

  <nav class="main-nav">
    <li class="nav-item-1"><a href="#">home</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">contact</a></li>
    <li><a href="#">FREE QUOTE</a></li>
  </nav>
</header>

Flexbox: How to align logo and navbar inline pushed to opposite directions

3 Answers3