title: Center a flex item when its siblings have different widths
body: <p>I know flexbox offers a great solution for centering items. But I run into an issue when I have 3 items and I'd like the center (2nd) item to be centered with respect to the window, regardless of the size of the other 2 items.</p>
  
  <p>In my pen you can see the second item "Client Index" is off-center because the content on the right is larger than the content on the left.  <strong>How can I force it to center itself?</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex"&gt;
    &lt;span style="font-size:12px;"&gt;small&lt;/span&gt;
    &lt;span style="font-size:20px;"&gt;Client Index&lt;/span&gt;
    &lt;span style="font-size:18px;"&gt;Lots of content that moves the center&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/anon/pen/Pjqjvd" rel="noreferrer">My Codepen</a></p>