html - Flexbox - Justify left and right on the same line -

situation:

i have simple nav bar i'm building in flexbox. want float 1 item left , keep others pegged right.

example:

<nav>   <ul class="primary-nav">     <li><a href="#" id="item1">listitem1</a></li>     <li><a href="#" id="item2">listitem2</a></li>     <li><a href="#" id="item3">listitem3</a></li>     <li><a href="#" id="item4">listitem4</a></li>   </ul> </nav>  

problem

typically answers involve floating items left , right supposedly in flexbox bad use floats. thinking using justify-content , using flex-start , flex-end isn't working out well.

i tried applying flex-start first item , flex-end others didn't work well.

like so:

.primary-nav #item1 {   justify-content: flex-start; }  .primary-nav #item2 {   justify-content: flex-end; }  .primary-nav #item3 {    justify-content: flex-end;  }  .primary-nav #item4 {     justify-content: flex-end;     } 

praise , has flexbox skills , can show me proper way handle situation. :)

if you're looking have 1 element on left , others on right, simplest solution use justify-content:flex-end on parent element move elements right , add margin-right:auto element want have on left

.primary-nav {      display:-webkit-flex;      display:flex;      list-style-type:none;      padding:0;      justify-content:flex-end;  }    .left {      margin-right:auto;  }

<nav>    <ul class="primary-nav">      <li class="left"><a href="#">listitem1</a></li>      <li class="right"><a href="#">listitem2</a></li>      <li class="right"><a href="#">listitem3</a></li>      <li class="right"><a href="#">listitem4</a></li>    </ul>  </nav>