css3对文字标签不同宽,不同高使用瀑布流对齐显示

bash 复制代码
<div class="wrapper" style="padding: 0;">
 <span class="wf-item task-tags text-center" v-for="(item,index) in data.categorys" :key="index">{{ item }}</span>
</div>

/* 名称瀑布流显示 */
.wrapper {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: 15px 5px;
}
.wrapper::after {
    content: "";
    flex-grow: 99999;
}
.wf-item {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    padding: 10px;
    border: 1px solid #e7e7e7;
}
相关推荐
inksci几秒前
使用飞帆的上传组件
前端·javascript
里欧跑得慢4 分钟前
微交互设计模式:提升用户体验的细节之美
前端·css·flutter·web
FOREVER-Q6 分钟前
基于 Vite 的前端 SDK 工程化设计与模块化构建实践
开发语言·前端·javascript
耗子君QAQ15 分钟前
为什么 AI 写代码也需要说明书?
前端·javascript·ai编程
h_654321015 分钟前
公告/消息提示从右向左循环滚动vue
前端·javascript·vue.js
Lyyaoo.16 分钟前
JWT 令牌(待更新)
java·前端·javascript
weixin_4367778719 分钟前
el-select的label没有没有反显怎么办?
开发语言·前端·javascript
暗不需求26 分钟前
React项目架构深度解析:从0到1理解现代前端工程化
前端·javascript·react.js
jiayong2328 分钟前
第 40 课:任务详情抽屉里的编辑 / 删除联动强化
java·开发语言·前端·javascript·vue.js·学习
Mr.mjw31 分钟前
vue中使用 postcss-px-to-viewport 插件实现多屏适配
javascript·vue.js·postcss