title: Flexbox: centered element with space-around elements on either side
body: <p>I'm using flexbox to set up a menu consisting of seven <code>&lt;li&gt;</code> elements with various widths. I'd like my middle (4th in the source order) <code>&lt;li&gt;</code> element to always be horizontally centered as a sort of anchor, with the 1-3rd <code>&lt;li&gt;</code> elements occupying the space to the left of the centered <code>&lt;li&gt;</code> and the 5th-7th occupying the space to the right.</p>
  
  <p><img src="https://i.stack.imgur.com/Nm2nd.jpg" alt="enter image description here"></p>
  
  <p>I've tried <code>space-around</code>, <code>space-between</code> on the parent flex container as well as <code>align-self: center</code> on the <code>&lt;li&gt;</code> element I'm trying to center, but so far no luck. Any help from someone knowledgeable in flexbox would be appreciated. </p>
  
  <p><a href="http://jsfiddle.net/g7kCc/26/" rel="noreferrer">jsfiddle</a>  </p>