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

Question

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

父 div 设置为display: flex;with flex-wrap: wrap;。

我希望链接元素换到一个新行，在发生换行效果时清除标题。

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

我已经附上了到目前为止的代码，但这里是Codepen的链接

我正在努力实现的目标：

默认- 屏幕的宽度足够大，所以没有任何包裹，所有内容都在一行中 >

Wrapped - 屏幕的宽度更小，发生了 wrap - 标题现在有 100% 的宽度并且链接清除了它 >

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

.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

是的，随着结构的变化。

将标签包裹在它们自己的 div 中flex:1。然后它会自动展开，标签会在发生换行时下降到第二行。

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

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

代码笔演示