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;
}
相关推荐
charlee441 分钟前
给Markdown渲染网页增加一个目录组件(Vite+Vditor+Handlebars)(上)
javascript·vite·markdown·vditor·handlebars
BillKu15 分钟前
Vue3 + Vite 中使用 Lodash-es 的防抖 debounce 详解
前端·javascript·vue.js
一只小风华~23 分钟前
HTML前端开发:JavaScript的条分支语句if,Switch
前端·javascript·html5
bingbingyihao31 分钟前
UI框架-通知组件
前端·javascript·vue
逝缘~1 小时前
小白学Pinia状态管理
前端·javascript·vue.js·vscode·es6·pinia
光影少年1 小时前
vite原理
前端·javascript·vue.js
陌上烟雨寒1 小时前
vue手写一个步骤条steps
javascript·css·vue
C MIKE1 小时前
ztree.js前端插件样式文字大小文字背景修改
开发语言·前端·javascript
ViceBoy_2 小时前
前端的Promise的方法all,race,any
前端·javascript
bnnnnnnnn2 小时前
看完就懂、懂完就敢讲的「原型与原型链」终极八卦!
前端·javascript·面试