grid布局,flex布局实现类似响应式布局的效果

一. grid布局

实现代码

<!DOCTYPE html>
<html lang="en"><head><style>.box {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /*自动填充,最小宽度300px*/justify-content: space-between;gap: 10px;}.item {background: pink;height: 100px;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div></div>
</body></html>

效果图:
在这里插入图片描述
在这里插入图片描述

一. flex布局

实现代码

<!DOCTYPE html>
<html lang="en"><head><style>.box {display: flex;flex-wrap: wrap;}.item {flex: 1 0 300px; /*1 表示每个 div 元素会按比例占满可用空间,0 表示不允许缩小,300px 表示设置最小宽度为 300 像素 */min-width: 300px;background: pink;height: 100px;margin-right: 10px;margin-bottom: 10px;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div></div>
</body></html>

效果图:
在这里插入图片描述

问题: flex布局对于最后一行的的子元素个数不足上一行的子元素个数时,它的子元素也会占满本行,导致最后一行的子元素宽度变大。

改进一下下: 添加空白元素,使得最后一行的元素与前面的元素同宽。

修改后的代码

<!DOCTYPE html>
<html lang="en"><head><style>.box {display: flex;flex-wrap: wrap;}.item {flex: 1 0 300px; /*1 表示每个 div 元素会按比例占满可用空间,0 表示不允许缩小,300px 表示设置最小宽度为 300 像素 */min-width: 300px;background: pink;height: 100px;margin-right: 10px;margin-bottom: 10px;}.h0{height: 0;}</style>
</head><body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><!-- 空元素 (vue里面直接写 v-for="item in 4"--><div class="item h0" ></div><div class="item h0"></div></div>
</body></html>

效果图:
在这里插入图片描述

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

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

相关文章

yml配置文件怎么引用pom.xml中的属性

目录 前言配置测试 前言 配置文件中的一些参数有时要用到pom文件中的属性&#xff0c;做到pom文件变配置文件中也跟着变&#xff0c;那如何才能做到呢&#xff0c;下面咱们来一起探讨学习。 配置 1.首先要在pom.xml中做如下配置&#xff0c;让maven渲染src/main/resources下配…

推荐系统算法 协同过滤算法详解(二)皮尔森相关系数

目录 前言 协同过滤算法(简称CF) 皮尔森(pearson)相关系数公式 算法介绍 算法示例1&#xff1a; 算法示例2 前言 理解吧同胞们&#xff0c;实在是没办发把wps公式复制到文章上&#xff0c;只能截图了&#xff0c;我服了&#xff01;&#xff01;&#xff01; 协同过滤算法…

“License“(美式拼写)/ “Licence“(英式拼写)基本含义相同 许可证或执照,通常用于表示某人获得的特定权限或资格。

“License” 和 “licence” 是两个拼写不同但含义相近的单词&#xff0c;它们在用法上存在一些区别&#xff0c;主要取决于所在的英语体系。 “License”&#xff08;美式拼写&#xff09;/ “Licence”&#xff08;英式拼写&#xff09;&#xff1a; 这两个词在美式英语和英式…

【进口控制器替代】基于Zynq-7020 FPGA的NI 8槽CompactRIO控制器

667 MHz双核CPU&#xff0c;512 MB DRAM&#xff0c;1 GB存储容量&#xff0c;Zynq-7020 FPGA&#xff0c;更宽工作温度范围&#xff0c;8槽CompactRIO控制器 cRIO-9068是一款坚固耐用的无风扇嵌入式控制器&#xff0c;可用于高级控制和监测应用。这款软件设计控制器搭载FPGA、…

c++的第一天

思维导图 输入一个字符串&#xff0c;计算大小写&#xff0c;数字&#xff0c;空格和其他字符 #include <array> #include <string>using namespace std;int main() {string str;cout << "请输入一串包含大写小写数字和空格的字符串:" ;getline(c…

flask_apscheduler源码分析

前言 遵循flask框架的标准的库&#xff0c;都称为flask扩展&#xff0c;flask_apscheduler是对apscheduler的扩展&#xff0c;也称为flask的扩展&#xff0c;最近使用flask_apscheduler遇到了一个job死亡的bug。现象&#xff1a;job平时是正常启动的&#xff0c;突然某个时刻全…

MODNet 剪枝再思考: 优化计算量的实验历程分享

目录 1 写在前面 2 模型分析 3 遇到问题 4 探索实验一 4.1 第一部分 4.2 第二部分 Error 1 Error 2 4.3 实验结果 ①参数量与计算量 ②模型大小 ③推理时延 5 探索实验二 5.1 LR Branch 5.2 HR Branch 5.2.1 初步分析 5.2.2 第一部分 enc2x 5.2.3 第二部分 en…

量化交易科普

量化 语言和逻辑层面&#xff0c;用量词指定一个谓词的有效性的广度的构造 一些、很多、所有 量化交易 针对可交易的投资商品&#xff0c;理性地运用逻辑分析和归纳统计判断市场趋势 量化策略 常用的股票量化指标 相关平台 财经网站&#xff1a;新浪、雅虎、东方财富等 证券公…

php正则电话号

400电话的正则/^400[0-9]{7}/ 800电话正则/^800[0-9]{7}/ 手机号码正则/^1(3|4|7|5|8)([0-9]{9})/ 座机号码正则^0[0-9]{2,3}-[0-9]{8} 要匹配其中之一就在中间以|隔开 (400正则)|(800正则)|(手机号)|(座机号)| $phone preg_replace("/\s| /","",$p…

百度网盘网页无法调起客户端 目前未解决 2024年1月出现BUG

最近一周突然发现百度网盘网页无法调起客户端&#xff0c;多方式排查还是没找出问题所在&#xff0c;怀疑是客户端更新了什么东西导致bug。先记录下各种排查法和复现情况。 具体问题是&#xff1a; *任意网盘链接&#xff0c;都无法唤醒客户端。 *客户端在退出状态网页点击下…

数据结构(C语言版)代码实现(三)——单链表部分代码实现

目录 格式 头文件 宏定义 线性表的单链表存储结构 按位查找 插入元素 删除元素 头插法建立单链表 合并非递减单链表 其他基本操作 完整版 测试代码&#xff08;主函数&#xff09; 测试结果 格式 参考 2.3节 线性表的链式表示和实现 头文件 宏定义 #pragma onc…

GBASE南大通用数据库通过 GBase ADO.NET 接口读取数据

通过 GBase ADO.NET 接口读取 GBase Server 数据需要下面的步骤&#xff1a; 1) 使用 GBaseConnection 创建数据库连接对象 2) 使用 GBaseCommand 创建命令对象 3) 使用连接对象打开连接 4) 设置命令对象的 CommandText 属性&#xff0c;指明查询语句&#xff0c;并关联连接对…

html+css+javascript实现贪吃蛇游戏

文章目录 一、贪吃蛇游戏二、JavaScript三、HTML四、CSS五、热门文章 一、贪吃蛇游戏 这是一个简单的用HTML、CSS和JavaScript实现的贪吃蛇游戏示例。 HTML部分&#xff1a; <!DOCTYPE html> <html> <head><title>贪吃蛇游戏</title><styl…

【C++】命名空间详解

目录 前言 命名空间的定义 命名空间的使用 前言 在C/C中&#xff0c;变量、函数和后面要学到的类都是大量存在的&#xff0c;这些变量、函数和类的名称将都存 在于全局作用域中&#xff0c;可能会导致很多冲突。使用命名空间的目的是对标识符的名称进行本地化&#xff0c; 以…

【LeetCode力扣】面试题 17.14. 最小K个数(top-k问题)

目录 1、题目介绍 2、解题思路 2.1、优先队列解法 2.2、top-k问题解法 1、题目介绍 原题链接&#xff1a;面试题 17.14. 最小K个数 - 力扣&#xff08;LeetCode&#xff09; 题目要求非常简短&#xff0c;也非常简单&#xff0c;就是求一组数中的k个最小数。 2、解题思路 …

数据结构:完全二叉树(递归实现)

如果完全二叉树的深度为h&#xff0c;那么除了第h层外&#xff0c;其他层的节点个数都是满的&#xff0c;第h层的节点都靠左排列。 完全二叉树的编号方法是从上到下&#xff0c;从左到右&#xff0c;根节点为1号节点&#xff0c;设完全二叉树的节点数为sum&#xff0c;某节点编…

【重点问题】攻击面发现及管理

Q1&#xff1a;在使用长亭云图极速版时&#xff0c;是否需要增设白名单扫描节点&#xff1f; 长亭云图极速版高级网络安全产品基于一种理念&#xff0c;即攻击面发现是一个不断变换且需要持续对抗的过程。在理想的情况下&#xff0c;用户应当在所有预置防护设施发挥作用的环境…

C++面试:stl的栈和队列介绍

目录 栈 栈&#xff08;stack&#xff09;的声明&#xff1a; push()&#xff1a; 将元素推入栈顶 pop()&#xff1a; 弹出栈顶元素 top()&#xff1a; 访问栈顶元素&#xff0c;但不弹出 empty()&#xff1a; 检查栈是否为空 size()&#xff1a; 返回栈中元素的数量 …

【MQ01】什么是消息队列?用哪个消息队列?

什么是消息队列&#xff1f;用哪个消息队列&#xff1f; 来了来了&#xff0c;消息队列系列总算来咯。对于搜索引擎相关的知识大家消化的怎么样呀&#xff1f;其实对于搜索引擎来说&#xff0c;我们学习的内容还是挺全面的&#xff0c;也算是比较深入了。而对于消息队列来说&am…

6.第一个Python爬虫程序

使用 Python 内置的 urllib 库获取网页的 html 信息。注意&#xff0c;urllib 库属于 Python 的标准库模块&#xff0c;无须单独安装&#xff0c;它是 Python 爬虫的常用模块 获取网页html信息 1) 获取响应对象 向百度&#xff08;百度一下&#xff0c;你就知道&#xff09;…