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

相关推荐
李少兄3 小时前
HTML 表单控件
前端·microsoft·html
学习笔记1014 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19434 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧4 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台4 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪1004 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc5 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
繁花与尘埃6 小时前
CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习
吃饺子不吃馅6 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学
Baklib梅梅7 小时前
无头内容管理系统:打造灵活高效的多渠道内容架构
前端·ruby on rails·前端框架·ruby