完美解决 flex 实现一行三个,显示多行,左对齐

效果图

在这里插入图片描述

代码

<body><section class="content"><div class="item">元素</div><div class="item">元素</div><div class="item">元素</div><div class="item">元素</div><div class="item">元素</div><div class="item">元素</div><div class="item">元素</div></section>
</body>
<style>.content {width: 100%;display: flex;flex-wrap: wrap;background-color: skyblue;}.item {flex: 0 0 calc((100% - 10px)/3);height: 120px;background-color: pink;/* 间隙为5px */margin: 0 5px 5px 0;}.item:nth-child(3n) {/* 去除第3n个的margin-right */margin-right: 0;}
</style>

方法二

.item {/* flex: 0 0 calc((100% - 10px)/3); */width: calc((100% - 10px) / 3);height: 120px;background-color: pink;/* 间隙为5px */margin: 0 5px 5px 0;
}

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

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

相关文章

代理IP与Socks5代理的技术奇妙之旅

随着数字化时代的崛起&#xff0c;网络工程师们日益承担着维护网络稳定性和保护数据安全的重任。在这个充满挑战的世界里&#xff0c;代理IP与Socks5代理技术成为了他们的秘密武器&#xff0c;本文将带您踏上一段技术奇妙之旅&#xff0c;深入了解这两项技术在不同领域中的应用…

【MySQL】Linux 中 MySQL 环境的安装与卸载

文章目录 Linux 中 MySQL 环境的卸载Linux 中 MySQL 环境的安装 Linux 中 MySQL 环境的卸载 在安装 MySQL 前&#xff0c;我们需要先将系统中以前的环境给卸载掉。 1、查看以前系统中安装的 MySQL rpm -qa | grep mysql2、卸载这些 MySQL rpm -qa | grep mysql | args yum …

关于Jupyter markdown的使用

一级标题 #空格 标题1 二级标题 ## 空格 标题2 三级标题 ###空格 标题3 无序&#xff1b; 有序&#xff1a; 数学符号&#xff1a;

链表的基本操作(数据结构)

单链表 #include <stdlib.h> #include <iostream> #include <stdio.h> typedef struct LNode{int data;struct LNode *next; }LNode,*LinkList;打印链表 void PrintList(LNode *p) {LNode *temp;temp p->next;printf("链表的顺序:");while(t…

Rust Http 性能测试框架/工具

在Rust中&#xff0c;有几个常用的性能测试框架和工具可用于对HTTP性能进行测试。以下是其中一些&#xff1a; 1、Criterion&#xff1a;Criterion是一个通用的性能测试框架&#xff0c;可以用于测试各种类型的代码性能&#xff0c;包括HTTP性能。你可以使用Criterion来编写和运…

使用UiPath和AA构建的解决方案 3. CRM 自动化

您是否曾经从一个应用程序中查找数据并更新另一个系统? 在许多情况下,人们在系统之间复制和移动数据。有时,可能会发生“转椅活动”,从而导致人为失误。RPA可以帮助我们自动化这些活动,使其更快,同时还可以消除任何人为错误。 在这个项目中,我们将在客户服务中自动化一…

正则验证用户名和跨域postmessage

一、正则验证用户名 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>登录</title> </head> <body> <form action"/login" method"post"><input type…

系统架构设计:3 软件架构建模技术与应用

目录 一 架构“4+1”视图 二 论点 1 架构的本质 2 “4+1”视图 (1)逻辑视图 <

蓝桥杯每日一题2023.10.2

时间显示 - 蓝桥云课 (lanqiao.cn) 题目描述 题目分析 输入为毫秒&#xff0c;故我们可以先将毫秒转化为秒&#xff0c;由于只需要输出时分&#xff0c;我们只需要将天数去除即可&#xff0c;可以在这里多训练一次天数判断 #include<bits/stdc.h> using namespace std…

【网络安全 --- kali2023安装】超详细的kali2023安装教程(提供镜像资源)

如果你还没有安装vmware 虚拟机&#xff0c;请参考下面博客安装 【网络安全 --- 工具安装】VMware 16.0 详细安装过程&#xff08;提供资源&#xff09;-CSDN博客【网络安全 --- 工具安装】VMware 16.0 详细安装过程&#xff08;提供资源&#xff09;https://blog.csdn.net/m0…

python代码封装二进制文件并使用C#调用方案

思路 首先使用Cython库将python代码生成二进制文件pyd&#xff0c;然后使用C#中的pythonnet的Nuget包来进行调用&#xff0c;python代码中可以使用第三方类库。 Cython使用 Cython的安装 在命令行中使用如下语句即可安装Cython pip install cythonpyd文件格式 Cython用于…

openGauss学习笔记-93 openGauss 数据库管理-访问外部数据库-oracle_fdw

文章目录 openGauss学习笔记-93 openGauss 数据库管理-访问外部数据库-oracle_fdw93.1 编译oracle_fdw93.2 使用oracle_fdw93.3 常见问题93.4 注意事项 openGauss学习笔记-93 openGauss 数据库管理-访问外部数据库-oracle_fdw openGauss的fdw实现的功能是各个openGauss数据库及…

Umijs介绍

今天我们来看 umijs 我们访问官网 https://umijs.org/ 这是一个可 插拔的企业级 React框架 当然 你也可以选择 React 的一个脚手架 但是 这样就有很多需要考虑的东西 用这个umi 很多点 我们就不需要考虑了 框架已经帮我们配置好了 这边 我们点击快速上手的一个 指南 我们可…

非 Prop 的属性

概念 父组件传给子组件的属性&#xff0c;但该属性没有在子组件 props 属性里定义。 属性继承 非 Prop 的属性默认情况下会被子组件的根节点继承&#xff0c;非 prop 的属性会保存在子组件 $attrs 属性里。 举例 子组件 date-picker 如下 <!-- 我是子组件 date-picker --&…

数据结构刷题训练——二叉树篇(一)

&#x1f4d9;作者简介&#xff1a; 清水加冰&#xff0c;目前大二在读&#xff0c;正在学习C/C、Python、操作系统、数据库等。 &#x1f4d8;相关专栏&#xff1a;C语言初阶、C语言进阶、C语言刷题训练营、数据结构刷题训练营、有感兴趣的可以看一看。 欢迎点赞 &#x1f44d…

贪心找性质+dp表示+矩阵表示+线段树维护:CF573D

比较套路的题目 首先肯定贪心一波&#xff0c;两个都排序后尽量相连。我一开始猜最多跨1&#xff0c;但其实最多跨2&#xff0c;考虑3个人的情况&#xff1a; 我们发现第3个人没了&#xff0c;所以可以出现跨2的情况 然后直接上dp&#xff0c;由 i − 1 , i − 2 , i − 3 i…

D (1092) : DS循环链表—约瑟夫环(Ver. I - A)

Description N个人坐成一个圆环&#xff08;编号为1 - N&#xff09;&#xff0c;从第S个人开始报数&#xff0c;数到K的人出列&#xff0c;后面的人重新从1开始报数。依次输出出列人的编号。 例如&#xff1a;N 3&#xff0c;K 2&#xff0c;S 1。 2号先出列&#xff0c;然…

谷歌浏览器驱动下载

谷歌浏览器驱动下载 在使用selenium进行网页操作的时候通常会用到驱动器。以下是谷歌浏览器驱动下载方式。 谷歌浏览器驱动下载链接&#xff1a;https://chromedriver.chromium.org/downloads 打开连接后按照下图步骤进行操作&#xff1a; 查找出自己谷歌浏览器版本后根据以…

gitlab突然提示我要输入密码了。

用了很长时间的一个gitlab库&#xff0c;今天提交代码的时候突然提示我输入密码了&#xff0c;并且用户还是gitxx.xx.xx.xx的&#xff0c;瞬间懵逼。 想想原因&#xff0c;可能是因为我不久前设置了本地对另外一个git库的远程访问&#xff0c;用的是ssh&#xff0c;操作过程中可…

【单元测试】如何使用 JUnit5 框架?

JUnit5 单元测试框架使用教程 一、Junit5 是什么&#xff1f; Junit5是一个用于在Java平台上进行单元测试的框架。JUnit 5 框架主要由三部分组成&#xff1a;JUnit Platform、JUnit Jupiter 和 JUnit Vintage。 JUnit Platform&#xff1a;定义了测试引擎的 API&#xff0c;是…