使用flex-grow和flex-wrap将元素分解到新行

Question

我有一个包含链接和标题的父div（.tags）。

使用display: flex;将父div设置为flex-wrap: wrap;。

我希望链接元素能够突破新行，在包装效果发生时清除标题。

我已尝试在标题上使用flex-grow: 1，但这使得它始终将链接推送到屏幕右侧，这不是我所追求的。

我已添加了目前为止的代码，但这里有Codepen

的链接

我想要实现的目标：

默认 - 屏幕的宽度足够大，所以没有任何内容，一切都在一行上＆gt;

Wrapped - 屏幕宽度较小，已经发生换行 - 标题现在有100％的宽度，链接清除它＆gt;

请注意，链接数量可能会有所不同。

.container {
  background: lightgray;
  width: 100%;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}
.tags span {
  margin: 1rem;
}
.tags .tag {
  margin: 0.2rem;
  padding: 0.2rem;
  background: dodgerblue;
  color: white;
}

<div class="container">
  <div class="tags">
    <span>Tagged in:</span>
    <a class="tag" href="#">capabilities</a>
    <a class="tag" href="#">sales</a>
  </div>
</div>

Answer 1

是的，结构发生了变化。

使用flex:1将标记包装在自己的div中。然后 it 将自动展开，当换行发生时，标签将下降到第二行。

＆＃13;

＆＃13;

.container {
  background: lightgray;
  width: 100%;
}
.tags {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.tags span {
  margin: 0 1rem;
}
.tags .tag-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.tags .tag {
  margin: 0.2rem;
  padding: 0.2rem;
  background: dodgerblue;
  color: white;
}

＆＃13;

<div class="container">
  <div class="tags">
    <span>Tagged in:</span>
    <div class="tag-wrap">
      <a class="tag" href="#">capabilities</a>
      <a class="tag" href="#">sales</a>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Codepen Demo

Answer 2

flex增长1，flex收缩0，flex basis auto：

span {
    flex:1 0 auto;
}