title: Flexbox - Justify left and right on the same line
body: <p><strong>Situation:</strong></p>
  
  <p>I have a simple nav bar that I'm building in Flexbox. I want to float one item to the left and keep the others pegged to the right.</p>
  
  <p><strong>Example:</strong></p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul class="primary-nav"&gt;
      &lt;li&gt;&lt;a href="#" id="item1"&gt;ListItem1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="item2"&gt;ListItem2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="item3"&gt;ListItem3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" id="item4"&gt;ListItem4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt; 
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>Typically answers involve just floating items left and right but supposedly in Flexbox it is bad to use Floats. I was thinking about using justify-content and using flex-start and flex-end but that Isn't working out too well.</p>
  
  <p>I tried applying flex-start to the first item and then flex-end to the others but that didn't work so well.</p>
  
  <p>Like So:</p>
  
  <pre><code>.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;    
  }
  </code></pre>
  
  <p>Praise  and thanks to anyone who has Flexbox skills and can help show me the proper way to handle this situation. :)</p>