小编mat*_*som的帖子
使用 flex-grow 和 flex-wrap 将元素拆分到新行
我有一个.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> …3
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数