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;
}
相关推荐
Allshadow12 小时前
Nest.js - 目录结构
javascript·nestjs
张元清12 小时前
React useCookie Hook:把 Cookie 变成响应式状态(2026)
javascript·react.js
Helen_cai13 小时前
OpenHarmony 项目统一全局样式、尺寸、色彩主题封装 ThemeUtil(API23)
开发语言·前端·javascript·华为·harmonyos
winfredzhang13 小时前
用 wxPython + ECharts + 阿里矢量地图,做一个可离线兜底的上海雨量看板
前端·javascript·echarts
索西引擎13 小时前
【React】Immer.js 在现代 Redux 生态中的角色:不可变性保障的工程化实现与开发体验优化
前端·javascript·react.js
只一13 小时前
拿捏大模型输出随机性:Temperature、Top-K 原理 + LangChain 工程落地实战
javascript·langchain
胡萝卜术13 小时前
抽象的三级跳:从原生 DOM 到 React 组件树,我们到底在解决什么问题?
前端·javascript·面试
jun_bai14 小时前
Orthanc for Windows版PACS服务器安装教程
javascript·扩展屏应用开发
GuWen_yue14 小时前
Cursor黑盒拆解!1套LangChain.js手写Mini编程Agent,自动生成React项目,效率提升60%
javascript·react.js·langchain
用户2986985301414 小时前
React 项目中灵活管理 Excel 工作表:增删与移动
javascript·react.js·excel