用flex实现grid布局

1. 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.用法

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/87406.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【SpringBoot】-IDEA社区版SpringBoot项目的创建

作者:学Java的冬瓜 博客主页:☀冬瓜的主页🌙 专栏:【Framework】 主要内容:IDEA下的springboot项目的创建,网页下springboot项目的创建。springboot目录结构的认识。 文章目录 一、什么是SpringBoot&#x…

【C++】STL之适配器---用deque实现栈和队列

目录 前言 一、deque 1、deque 的原理介绍 2、deque 的底层结构 3、deque 的迭代器 4、deque 的优缺点 4.1、优点 4.2、缺点 二、stack 的介绍和使用 1、stack 的介绍 2、stack 的使用 3、stack 的模拟实现 三、queue 的介绍和使用 1、queue 的介绍 2、queue 的使用 3、qu…

RabbitMQ实现秒杀场景示例

本文章通过MQ队列来实现秒杀场景 整体的设计如下图,整个流程中对于发送发MQ失败和发送到死信队列的数据未做后续处理 1、首先先创建MQ的配置文件 Configuration public class RabbitConfig {public static final String DEAD_LETTER_EXCHANGE "deadLetterE…

Python爬虫在Web应用自动化测试中的应用

在Web应用开发过程中,自动化测试是确保应用质量和稳定性的重要环节。本文将介绍如何使用Python爬虫与自动化测试技术相结合,实现对Web应用进行自动化测试的方法和步骤。通过这种结合,我们可以提高测试效率、减少人力成本,并确保应…

2023-09-25 LeetCode每日一题(LFU 缓存)

2023-09-25每日一题 一、题目编号 460. LFU 缓存二、题目链接 点击跳转到题目位置 三、题目描述 请你为 最不经常使用(LFU)缓存算法设计并实现数据结构。 实现 LFUCache 类: LFUCache(int capacity) - 用数据结构的容量 capacity 初始…

设计模式之解释器模式

文章目录 四则运算问题传统方案解决四则运算问题分析解释器模式基本介绍解释器模式的原理类图解释器模式来实现四则解释器模式的注意事项和细节 四则运算问题 通过解释器模式来实现四则运算,如计算 ab-c 的值,具体要求 先输入表达式的形式,比…

如何访问TDH中Inceptor 底层的元数据库TxSQL

如何访问TDH中Inceptor 底层的元数据库TxSQL 1 Inceptor概述 在大数据生态系统中,HIVE是离线数据仓库事实上的标准,绝大多数的大数据分析型系统或数据仓库系统,都是基于HIVE来构建的。 在星环的大数据平台TDH中,在功能上对应开…

基于物联网的农村地区智能微电网系统(Simulink)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

uniapp webview实现双向通信

需求&#xff1a;uniapp webview嵌套一个h5 实现双向通信 uniapp 代码 <template><view><web-view src"http://192.168.3.150:9003/" message"onMessage"></web-view></view> </template><script>export defau…

Mysql主从数据恢复随笔

目录 1.使用pt-table-checksum插件安装方式如下 2.在主节点执行检查数据同步情况 3.同步检查出现的问题 3.1没有sock文件 3.2 Authentication plugin ‘sha256_password’ cannot be loaded: /usr/lib64/mysql/plugin/sha256_password.so: 无法打开共享对象文件: 没有那个文…

【办公自动化】使用Python一键往Word文档的表格中填写数据(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

vSAN数据恢复-vSAN架构下虚拟机磁盘组件出现问题的数据恢复案例

vsan数据恢复环境&#xff1a; 一套VMware vSAN超融合基础架构&#xff0c;全闪存&#xff0c;开启压缩重删。共11台服务器节点。每台服务器节点上配置1块PCIE固态硬盘和8-10块SSD固态硬盘。 每个服务器节点上创建1个磁盘组&#xff0c;每个磁盘组将1个PCIE固态硬盘识别为2个硬…

YOLOv8快速复现 官网版本 ultralytics

YOLOV8环境安装教程.&#xff1a;https://www.bilibili.com/video/BV1dG4y1c7dH/ YOLOV8保姆级教学视频:https://www.bilibili.com/video/BV1qd4y1L7aX/ b站视频&#xff1a;https://www.bilibili.com/video/BV12p4y1c7UY/ 1 平台搭建YOLOv8 平台&#xff1a;https://www.a…

使用Python进行员工流失分析

员工流失分析是指分析离开公司、企业的员工的行为&#xff0c;并将他们与公司中的现有员工进行比较。它有助于找出哪些员工可能很快离开。所以&#xff0c;如果你想学习如何分析员工流失&#xff0c;这篇文章适合你。本文中&#xff0c;将带您完成使用Python进行员工流失分析的…

【李沐深度学习笔记】基础优化方法

课程地址和说明 基础优化方法p2 本系列文章是我学习李沐老师深度学习系列课程的学习笔记&#xff0c;可能会对李沐老师上课没讲到的进行补充。 基础优化方法 在讲具体的线性回归实现之前&#xff0c;要先讲一下基础的优化模型的方法 梯度下降 当模型没有显示解&#xff08…

华为孟晚舟:从最惨千金 到最强战士

作者&#xff1a;积溪 简评&#xff1a;华为25号开发布会&#xff0c;有何深意&#xff1f;从最惨千金到最强战士&#xff0c;孟晚舟和华为都回来了 #华为发布会 #孟晚舟 #任正非 #华为 华为发布会 在打谁的脸&#xff1f; 苹果只是前菜 今天才是正餐 两年前的今天 华为…

数据结构 | 树

树 树是n&#xff08;n>0&#xff09;个结点的有限集。当n 0时&#xff0c;称为空树。在任意一棵非空树中应满足&#xff1a; 有且仅有一个特定的称为根的结点。当n>1时&#xff0c;其余节点可分为m&#xff08;m>0&#xff09;个互不相交的有限集T1,T2,…,Tm&#…

git_回退到上一次commit与pull

git 回退到上个版本 rollback 回滚 git reset HEAD&#xff0c; git 回退到上一版本

SpringCloud 学习(一)简介和环境搭建

1. 简介 1.1 SpringCloud SpringCloud 基于 SpringBoot 提供了一套微服务解决方案&#xff0c;包括服务注册与发现&#xff0c;配置中心&#xff0c;全链路监控&#xff0c;服务网关&#xff0c;负载均衡&#xff0c;熔断器等组件&#xff0c;除了 NetFlix 的开源组件做高度抽…

SpringMVC 学习(一)Servlet

1. Hello Servlet (1) 创建父工程 删除src文件夹 引入一些基本的依赖 <!--依赖--> <dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.12</version><scope>test<…