用flex实现grid布局

1. css代码

css 复制代码
.flexColumn(@columns, @gutterSize) {
  display: flex;
  flex-flow: row wrap;
  margin: calc(@gutterSize / -2);
  > div {
    flex: 0 0 calc(100% / @columns);
    padding: calc(@gutterSize / 2);
    box-sizing: border-box;
  }
}

2.用法

css 复制代码
.grid-show-item3 {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin: calc(8px / -2);
  .flexColumn(3, 14px);
}

.grid-show-item2 {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin: calc(8px / -2);
  .flexColumn(2, 14px);
}

.grid-show-item4 {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin: calc(8px / -2);
  .flexColumn(4, 14px);
}

3. 效果

相关推荐
超人不会飛6 分钟前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦9 分钟前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想12 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
今晚打老虎z20 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982425 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴31 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干34 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗36 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
独立开阀者_FwtCoder41 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder44 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github