html – Flexbox – 如果宽度发生变化,请勿移动居中的列

我有一个令人沮丧的问题与其他伟大的flexBox功能.我有以下布局与居中列

问题是,如果行中的一个文本增长或缩小,则FB / IG图标将不再位于同一列行中.走着瞧吧：

如何实现可变宽度文本不使元素向左增长,但是无论变量文本是什么,FB和IG图标实际上都保持在同一行？

这是代码

.test-links {
  display: flex;
  flex-direction: column;
}

.test-link {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="test-wrapper">
  <img class="test-img" src="path" />
  <div class="test-links">
    <a class="test-link">
      <i class="fb"></i>
      <span>Test</span>
    </a>
    <a class="test-link">
      <i class="ig"></i>
      <span>LongerText</span>
    </a>
  </div>
</div>

谢谢您的帮助！

解决方法

.test-links {
  display: flex;
  flex-direction: column;
}

.test-link {
  display: flex;
  justify-content: left;
  align-items: center;
  width:100px;
  margin:0 auto;
}
.test-wrapper
{
text-align:center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test-wrapper">
  <img class="test-img" src="https://dummyimage.com/100x100/000/fff" />
  <div class="test-links">
    <a class="test-link">
      <i class="fb fa fa-facebook"></i>
      <span>Test</span>
    </a>
    <a class="test-link">
      <i class="ig fa fa-instagram"></i>
      <span>LongerText</span>
    </a>
  </div>
</div>