用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. 效果

相关推荐
街尾杂货店&8 小时前
css word-spacing属性
前端·css
千叶寻-8 小时前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
光影少年13 小时前
angular生态及学习路线
前端·学习·angular.js
无尽夏_15 小时前
HTML5(前端基础)
前端·html·html5
Jagger_15 小时前
敏捷开发流程-精简版
前端·后端
FIN666815 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing16 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女12716 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿16 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN666816 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能