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;
}
相关推荐
sorryhc4 分钟前
【AI解读源码系列】ant design mobile——Avatar头像
前端·javascript·react.js
Mintopia13 分钟前
🎭 一场浏览器里的文艺复兴
前端·javascript·aigc
复苏季风41 分钟前
从布局难民到 flex 大神:新人必学的 Flex 布局全攻略
前端·css
然我42 分钟前
一篇吃透移动端适配!从原理到实战,面试题也帮你整理好了 📱
前端·css·html
华仔啊1 小时前
JS里怎么判断一个对象是否为空?怎么分清它到底是啥类型?
前端·javascript
码力无边_OEC1 小时前
第三章:与页面共舞 —— Content Scripts 的魔法
前端·javascript
兮漫天1 小时前
bun + vite7 的结合,孕育的 Robot Admin 【靓仔出道】(十八)
前端·javascript·vue.js
日月晨曦1 小时前
JavaScript中的this:一场关于"我是谁"的哲学之旅
前端·javascript
鹏多多1 小时前
前端图片裁剪Cropper.js核心功能与实战技巧详解
前端·javascript
秋天的一阵风1 小时前
前端小白变形记:你要学会这些设计模式!第七弹:代理模式
前端·javascript·面试