title: Horizontally center flex item between 2 flex items of different widths
body: <p>Say I have 3 divs displayed horizontally with <code>flexbox</code>:  </p>
  
  <pre><code> |     |-div1-| |-center-div-| |-wider-div-|     |
  </code></pre>
  
  <p>And I want the center div to be aligned to the middle of the parent.  How can I accomplish this? <code>justify-content</code> will center all 3 of the divs based the sum of all their widths, and applying <code>align-self: center</code> to the middle div does nothing because the align property manipulates positioning on the other axis.  </p>
  
  <p>Is there a responsive CSS solution, or should I resort to jQuery?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
      display: flex;
      justify-content: center;
      width: 100%;
      background-color: purple;
  }
  li {
      background-color: red;
      border: 5px solid blue;
      list-style: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href = "#"&gt;short&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href = "#"&gt;want center&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href = "#"&gt;loooooooooooooooooong&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Illustration of this problem: 
  <a href="https://jsfiddle.net/7w8mp8Lj/2/" rel="noreferrer">https://jsfiddle.net/7w8mp8Lj/2/</a></p>