html - Flexbox - 如果宽度改变，不要移动居中的列

Question

我对 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>

感谢您的帮助!

Answer 1

.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>