I want to make a menu using flexbox. For the menu in the header made justify-content: flex-end; I want to make a logo on the other side of the menu, but justify-content: flex-start; cannot be applied to a single element. Set the width for the menu and margin-right: auto; for the logo did not help. Used align-self , did not help either. What to do? Special thanks for the help in structuring the code. I'm just learning web development and my head is cooking poorly.

It should be like this:

enter image description here

When scaling it turns out like this:

enter image description here

 * { box-sizing: border-box; } ul { margin: 0 auto; width: 80%; background: #7F1143; } .main, .nav { -webkit-justify-content: flex-end; display: -webkit-flex; } .nav a { display: block; padding: 20px; color: white; text-decoration: none; } .logo { margin-right: auto; } .menu { display: flex; width: 80%; -webkit-justify-content: flex-end; } a:not(.logo):not(.contacts) { border-right: 1px solid #979797; } .nav { -webkit-flex-direction: row; -webkit-flex-wrap: wrap; list-style-type: none; } 
 <ul class="nav"> <li><a class="logo">Item 1</a> </li> <div class="menu"> <li><a href="#">Item 2</a> </li> <li><a href="#">Item 3</a> </li> <li><a href="#">Item 4</a> </li> </div> <li><a class="contacts" href="#">Contacts</a> </li> </ul>

    2 answers 2

    Small tips:
    First of all, do not put the div as a child ul . To be honest, in general only a div bypassed instead of ul and li .
    Secondly, margin-right: auto; will work only for the child (child), and not an arbitrary descendant (ancestor), so the class logo should be hung on li , and not on a .
    Thirdly, you should not use the -webkit vendor prefixes for what has been working without them for a long time, since you hardly need to support older versions of Chrome, because flexbox is relatively standard for a long time.

    Code:

     * { box-sizing: border-box; } .main, .nav { justify-content: flex-end; display: flex; } .nav { margin: 0; padding: 0; list-style-type: none; background-color: #7F1143; flex-direction: row; flex-wrap: wrap; } .nav a { display: block; padding: 20px; color: white; text-decoration: none; } .logo-container { margin-right: auto; } a:not(.logo):not(.contacts) { border-right: 1px solid #979797; } 
     <ul class="nav"> <li class="logo-container"><a class="logo">Item 1</a> </li> <li><a href="#">Item 2</a> </li> <li><a href="#">Item 3</a> </li> <li><a href="#">Item 4</a> </li> <li><a class='contacts' href="#">Contacts</a> </li> </ul>

      Or set the logo as position: relative;

      Or use display: inline-flex; justify-content: space-between;
      where all elements need to specify flex-basis: in% ratio relative to the whole block.

      Display rule: inline-flex; applies to the parent element, just like justify-content: space-between;