当前位置： 首页 > news >正文

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

news 2026/3/26 2:01:47

效果图

在这里插入图片描述

代码

<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;
}

相关文章：

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

效果图 代码 <body><section class"content"><div class"item">元素</div><div class"item">元素</div><div class"item">元素</div><div class"item">元素</di…...

编程日记 2023/10/8 19:01:24

初识Spring

目录 1.Spring 基础 2.传统程序开发 3.IoC程序开发&#xff08;解耦&#xff09; 4.DI 4.1 IoC 和 DI 有什么区别 1.Spring 基础 Spring 指的是 Spring Framework&#xff08;Spring 框架&#xff09;&#xff0c;它是⼀个开源框架&#xff0c;有着活跃⽽庞⼤的社区&…...

编程日记 2023/10/8 19:00:23

Mybatis 使用参数时$与#的区别

之前我们介绍了mybatis中参数的使用&#xff0c;本篇我们在此基础上介绍Mybatis中使用参数时$与#的区别。 如果您对mybatis中参数的使用不太了解&#xff0c;建议您先进行了解后再阅读本篇&#xff0c;可以参考&#xff1a; Mybatis参数(parameterType)https://blog.csdn.net…...

编程日记 2023/10/8 18:59:22

java基本数据类型和包装类型区别

...

编程日记 2023/10/8 18:58:20

解锁Spring Boot的强大配置功能：@ConfigurationProperties与@PropertySources详解

解锁Spring Boot的强大配置功能&#xff1a;ConfigurationProperties与PropertySources详解 前言什么是ConfigurationProperties和PropertySourcesConfigurationProperties的使用步骤 1: 创建 Java POJO 类步骤 2: 配置类步骤 3: 配置文件步骤 4: 注入配置属性 PropertySources…...

编程日记 2023/10/8 18:57:19

Java和Vue字符串加密

字符串加密 AES 加密算法 在 Java 中&#xff0c;可以使用不同的加密算法来对字符串进行加密。以下是使用 AES 加密算法的示例代码&#xff0c;演示如何对一个字符串进行加密&#xff1a; import javax.crypto.Cipher; import javax.crypto.spec.SecretKeySpec; import java…...

编程日记 2023/10/8 18:56:18

Java：java版结巴分词：jieba-analysis

文档 https://github.com/huaban/jieba-analysishttps://mvnrepository.com/artifact/com.huaban/jieba-analysis 依赖 <!-- https://mvnrepository.com/artifact/com.huaban/jieba-analysis --> <dependency><groupId>com.huaban</groupId><art…...

编程日记 2023/10/8 18:55:17

java生成一个符合密码学和安全性的随机秘钥

有时 我们在生成token 或者完成某种加密形式时会需要一个秘钥 但是 有些时候 项目开发并没有规定用什么秘钥 但是 秘钥都是要有一定格式规范的 我们可以通过以下代码生成一个随机秘钥 import java.security.SecureRandom; import java.util.Base64;public class TokenGenerat…...

编程日记 2023/10/8 18:54:16

C++ - 右值引用 和 移动拷贝

右值引用 我们先来了解什么是左值&#xff0c;什么是右值&#xff1a; 左值 和 有值 区分 首先&#xff0c;左值 和 右值 并不是完全意味着 在 "" 左边的就是 左值 &#xff1b; 在 "" 右边的就是右值。这是不一定的。只能说&#xff0c;在左边的大概率是…...

编程日记 2023/10/8 18:53:15

项目成员积分规则

在当下的项目/团队管理种&#xff0c;如何让成员能清晰的看到&#xff0c;自己的工作、努力在团队种属于那个段位&#xff0c;通过这个形式&#xff0c;并配合其他方式去点燃成员的进步之心。以积分的形式&#xff0c;代替绩效考核&#xff0c;一些零散的想法&#xff0c;欢迎各…...

编程日记 2023/10/8 18:52:14

Linux CentOS7 vim多窗口编辑

我们在用vim编辑文件时&#xff0c;有各种需求。如有时需要在多个文件之间来回操作&#xff0c;一会关闭一个文件&#xff0c;一会再打开另外一个文件&#xff0c;这样来回操作显得太笨拙。有时&#xff0c;vim编辑多行的大文件&#xff0c;来回查看、编辑前面一部分及最后一部…...

编程日记 2023/10/8 18:51:12

git使用，一点点

查看自己有没有安装git git --version 如果没有安装请执行sudo yum install -y git来安装 git 指令 git log 查看日志 git pull 同步远端和本地仓库 这就是冲突的报错&#xff1a; 所以这个时候你要同步一下git pull...

编程日记 2023/10/8 18:50:11

第五章：最新版零基础学习 PYTHON 教程—Python 字符串操作指南（第八节 - 如何在 C/C++、Python 和 Java 中分割字符串？）

通过某些分隔符分割字符串是一项非常常见的任务。例如，我们有一个文件中以逗号分隔的项目列表，并且我们希望数组中包含各个项目。 几乎所有编程语言都提供按某些分隔符分割字符串的函数。 目录 在C中： 在 C++ 中 方法一：使用C++的stringstream API...

编程日记 2023/10/8 18:48:10

【Java】语法特性篇

语法特性篇 Java对象的比较 1. 对象比较的问题 Java中引用类型的变量不能直接按照 > 或者 < 方式进行比较。那为什么可以比较&#xff1f; 因为&#xff1a;对于用户实现自定义类型&#xff0c;都默认继承自Object类&#xff0c;而Object类中提供了equal方法&#xf…...

编程日记 2023/10/8 18:47:08

Vim教程

目录 vim 介绍 常用的四种模式 首先先学会如何正确进入和退出vim&#xff1a; normal模式 insert模式&#xff1a; command模式&#xff1a; v-block模式&#xff1a; vim异常退出 vim配置 vim 介绍 Vim是一款高度可定制的文本编辑器&#xff0c;它的前身是Vi&#xf…...

编程日记 2023/10/8 18:46:07

selenium查找网页如何处理网站资源一直加载非常卡或者失败的情况

selenium查找网页如何处理网站资源一直加载失败的情况 selenium获取一个网页&#xff0c;某个网页的资源卡了很久还没有加载成功&#xff0c;如何放弃这个卡的数据&#xff0c;继续往下走 有2钟方式。通常可以采用下面的方式一来处理这种情况 方式一、WebDriverWait 这种方式…...

编程日记 2023/10/8 18:44:05

并发工具类库使用的常见问题

一、ThreadLocal在多线程环境中没有清理 由于ThreadLocal是和线程绑定的&#xff0c;如果线程被复用了&#xff0c;也即使用了线程池&#xff0c;那么ThreadLocal中的值是可能被复用的&#xff0c;这个特性如果是开发者没有预料到的&#xff0c;那么会产生很大的问题。例如&am…...

编程日记 2023/10/8 18:43:04

GD32F10X ----RTC

1. RTC的简介 STM32 的实时时钟&#xff08;RTC&#xff09;是一个独立的定时器。STM32 的 RTC 模块拥有一组连续计数的计数器&#xff0c;在相应软件配置下&#xff0c;可提供时钟日历的功能。修改计数器的值可以重新设置系统当前的时间和日期。 RTC 模块和时钟配置…...

编程日记 2023/10/8 18:42:03

使用UiPath和AA构建的解决方案 1. 机器人过程自动化入门

你好！在这本系列，我们将指导您完成一些真实世界的机器人过程自动化（RPA）项目。感谢您的加入。当你完成本系列时，你将具备使用UiPath和Automation Anywhere在最低指导下进行简单到中等复杂度RPA项目的知识、技术和心态。 RPA是一项令人兴奋的新技术，被视为使用新的先进技…...

编程日记 2023/10/8 18:41:02

rust字面量

字面量就是值。值最终必须编码成二进制存储在某块内存上。 变量与字面量的关系就像杯子和水的关系。 字面量是有类型的。字面量类型有&#xff1a;布尔、数字、文本、字节 一、布尔 类型是bool true false 二、数字 通过后缀表示类型 通过前缀表示进制 通过 “_” 来分割数…...

编程日记 2023/10/8 18:40:02

ChatGPT大模型语音开发入门：从API调用到实战避坑指南

背景痛点&#xff1a;语音交互的“暗礁” 当我们从文本交互迈向语音交互时&#xff0c;面临的挑战是立体的。新手开发者常常在兴致勃勃地调用API后&#xff0c;被一连串的“暗礁”绊倒。 音频格式的迷宫&#xff1a;大模型语音API通常对音频格式有严格要求&#xff0c;例如采…...

编程新知 2026/3/26 1:42:56

仅限核心开发者知晓的Python多解释器通信“暗通道”：通过_cffi_interpreter_bridge实现C层直接调用（非pickle、零序列化开销）

第一章&#xff1a;Python多解释器通信的演进与挑战Python长期以来以全局解释器锁&#xff08;GIL&#xff09;为基石&#xff0c;在单进程内保障线程安全&#xff0c;却也天然限制了多线程对CPU密集型任务的并行能力。为突破GIL束缚&#xff0c;Python 3.12正式引入原生支持的…...

编程新知 2026/3/26 1:16:45

【内存心法】别用玄学猜栈大小了！撕碎 RTOS 堆栈溢出的遮羞布，用 ARM MPU 构筑硬件级“死亡红区”与绝对沙箱

摘要&#xff1a;在错综复杂的多任务 RTOS 环境中&#xff0c;一个微小的局部数组越界&#xff0c;就能像癌细胞一样悄无声息地摧毁整个系统的内存空间。无数开发者迷信 FreeRTOS 的 vApplicationStackOverflowHook&#xff0c;却不知道它在真正的“跳跃式内存踩踏”面前形同虚…...

编程新知 2026/3/26 0:02:17

【仿真】【具身智能】云端低成本畅玩Isaac Lab：抢占式实例部署实战

1. 为什么选择云端抢占式实例部署Isaac Lab 第一次接触Isaac Lab时&#xff0c;我和大多数开发者一样被本地部署的高门槛吓退了。一张RTX 3090显卡就要上万元&#xff0c;更别提配套的CPU和内存配置要求。后来尝试过VNC远程连接方案&#xff0c;结果画面卡顿得像在看PPT&#x…...

编程新知 2026/3/25 23:50:12

FormCreate事件监听全攻略：从‘change’到‘control’，让你的表单真正‘活’起来

FormCreate事件监听全攻略&#xff1a;从‘change’到‘control’&#xff0c;让你的表单真正‘活’起来 表单开发从来不只是静态字段的堆砌。当你的用户需要根据前一个选择动态调整后续选项&#xff0c;当表单提交前需要实时校验多个字段的关联性&#xff0c;当字段间的显示逻…...

编程新知 2026/3/25 23:09:54

VSCode远程开发新姿势：用Remote-SSH直连Docker容器（附端口避坑指南）

VSCode远程开发新姿势&#xff1a;用Remote-SSH直连Docker容器&#xff08;附端口避坑指南&#xff09; 在云端开发时代&#xff0c;越来越多的工程师选择将开发环境封装在Docker容器中&#xff0c;以实现环境隔离和快速部署。然而&#xff0c;传统的SSH连接方式往往需要在终端…...

编程新知 2026/3/25 22:37:10

LSM9DS1驱动开发指南：Arduino库深度解析与STM32移植

1. Arduino_LSM9DS1 库深度解析&#xff1a;面向嵌入式工程师的 LSM9DS1 IMU 驱动开发指南LSM9DS1 是意法半导体&#xff08;STMicroelectronics&#xff09;推出的高集成度 9 轴惯性测量单元&#xff08;IMU&#xff09;&#xff0c;内部集成了三轴加速度计、三轴陀螺仪和三轴…...

编程新知 2026/3/25 22:27:09

Spring Security 7.x + JDK 25 加密升级

⚔️ 技文侠出品&#xff0c;必属精品开篇&#xff1a;安全是最后的底线 JDK 25 带来了新一代加密 API&#xff0c;Spring Security 7.x 全面拥抱响应式安全。本文将深入讲解如何构建面向未来的安全架构。一、JDK 25 加密新特性 1.1 新一代加密 API // JDK 25 新增&#xff1a;…...

编程新知 2026/3/25 22:17:04

Django Admin 后台让邮箱、科目必填 + 下拉选择

Django Admin 自定义用户必填字段 下拉科目选择在使用 Django 自定义用户模型时&#xff0c;默认邮箱是非必填&#xff0c;科目容易输入错误&#xff0c;本文实现&#xff1a;邮箱必填科目从下拉框选择&#xff08;语文、数学、英语、政治、历史、地理、生物、物理、化学&…...

编程新知 2026/3/25 21:50:44

康威生命游戏中的简易CPU设计与实现

生命游戏中的简易CPU - 第4部分 这是关于在生命游戏中创建数字逻辑门系列文章的第四篇。前几篇文章从如何创建数字逻辑门开始&#xff0c;并利用它们来构建简单的电路。在这篇文章中&#xff0c;我们将实际构建第一台真正的计算机&#xff1a;一个&#xff08;2级流水线&#x…...

编程新知 2026/3/25 21:46:43