title: How to center the middle item in a flex row?
body: <p>What I want as a result:</p>
  
  <p><img src="https://i.stack.imgur.com/BIvgM.png" alt=""></p>
  
  <p>I have three elements in a container that is a <code>display: flex</code> I want the left item to be aligned to the left, and the right item to the right. With the center item aligned in the center. </p>
  
  <p><code>space-between</code> is <strong>not</strong> the fix. It is not the solution I am looking for. This is because the elements are differing widths. Even with differing widths, I still want the middle element to be centered. </p>
  
  <p>This could be fixed with a wrapper. and then put a <code>flex: 1</code> on the wrappers, then within those wrappers, have the elements themselves. Again, this is <strong>not the fix</strong> I am looking for. I cannot use wrappers in my situation.</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>.parentContainer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .parentContainer &gt; *{
     background: red;
     text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parentContainer"&gt;
   &lt;div class="left"&gt;small&lt;/div&gt;
   &lt;div class="middle"&gt;medium element here&lt;/div&gt;
   &lt;div class="right"&gt;longer element is here too&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>