title: Flexbox - Don't move centered columns if width changes
body: <p>I have a frustrating problem with the otherwise great flexbox capabilities. I have the following layout with a centered column</p>
  
  <p><a href="https://i.stack.imgur.com/DcbfA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DcbfA.png" alt="enter image description here"></a></p>
  
  <p>The problem is, if one of the texts in the row grows or shrinks, then the FB/IG icons will not be in the same column line anymore. See what happens:</p>
  
  <p><a href="https://i.stack.imgur.com/eYIWV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eYIWV.png" alt="enter image description here"></a></p>
  
  <p>How can I achieve for variable width texts to not make the element grow to the left, but make the FB and IG icons actually stay in the same line no matter the variable texts??</p>
  
  <p>Here is the code</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>.test-links {
    display: flex;
    flex-direction: column;
  }
  
  .test-link {
    display: flex;
    justify-content: center;
    align-items: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test-wrapper"&gt;
    &lt;img class="test-img" src="path" /&gt;
    &lt;div class="test-links"&gt;
      &lt;a class="test-link"&gt;
        &lt;i class="fb"&gt;&lt;/i&gt;
        &lt;span&gt;Test&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="test-link"&gt;
        &lt;i class="ig"&gt;&lt;/i&gt;
        &lt;span&gt;LongerText&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you for your help!</p>