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

Question

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

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

我希望链接元素换行，在出现换行效果时清除标题。

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

我附上了目前为止的代码，但这里有一个指向 Codepen 的链接

我想要实现的目标:

默认 - 屏幕宽度足够大，所以没有任何东西换行，所有内容都在一行上>

环绕 - 屏幕宽度变小，出现环绕 - 标题现在有 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

是的，结构有所改变。

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

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

Codepen Demo