在包装之前使flexbox缩小尺寸

Question

我试图创建一个具有以下行为的响应式页面：

我需要两个<a>标签，一个贴在另一个旁边。这些标记在<i>标记中有一个图标，在<span>标记中包含一些文字。

当视口宽度减小时，我希望图标保持相同的大小，但我希望在将第二个<a>推到下一行之前尽可能地包装文本。此图像按顺序显示了我想要发生的事情：

This CodePen和我一样接近。我想要的功能就在那里，但是我必须在flex-basis: 100px中设置flex-grow: 1和.outer-item才能使其正常工作，这会产生不同的效果，即使两个项目的宽度相同并将它们分散在可用空间。

＆＃13;

＆＃13;

.outer-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.outer-item {
  flex: 1 0 100px;
}

.inner-container {
  display: flex;
  flex: 0 1 auto;
  padding-top: 5px;
}

.inner-img {
  flex: 0 0 40px;
  height: 40px;
  line-height: 40px;
  background-color: red;
}

.inner-label {
  flex: 0 1 auto;
}

＆＃13;

<div class="outer-wrapper">
  <a class="outer-item">
    <div class="inner-container">
      <i class="inner-img">img</i>
      <span class="inner-label">label label label label</span>
    </div>
  </a>
  <a class="outer-item">
    <div class="inner-container">
      <i class="inner-img">img</i>
      <span class="inner-label">label label label label label label label </span>
    </div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

有没有办法让它发挥作用？ Flexbox甚至可以使用，还是应该使用别的东西？

Answer 1

  

我想要的功能就在那里，但我必须在flex-basis: 100px中设置flex-grow: 1和.outer-item才能使其正常工作，这会产生不同的效果，即使两个项目的宽度相同将它们传播到可用空间。

您将outer-wrapper设置为display: flex，其作用类似于块级容器（即，它将占用该行上的所有可用空间）。

相反，请使用display: inline-flex，它只会消耗足够的宽度来容纳内容。

revised codepen