css使用弹性盒,让每个子元素平均等分父元素的4/1大小
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
原本:

ul {padding: 0;width: 100%;background-color: rgb(74, 80, 62);display: flex;justify-content: space-between;flex-wrap: wrap;li {/* 每个占4/1 */overflow: hidden;background-color: rgb(30, 15, 46);display: flex;justify-content: space-between;align-items: center;flex-direction: column;}
修改后:

li {padding: 0;border: 1px solid #00bcd4;background-color: rgb(30, 15, 46);display: flex;justify-content: space-between;align-items: center;flex-direction: column;flex: 0 0 50%; /* 宽度设置为父元素的1/2 */max-width: 50%; /* 最大宽度设置为父元素的1/2 */height: 50%; /* 高度设置为父元素的1/4 */&:nth-child(2n) {margin-right: 0; /* 每行的第二个li元素移除右边距 */}&:nth-child(odd) {margin-bottom: 0; /* 每列的第一个li元素(奇数位置)移除下边距 */}&:nth-last-child(-n + 2) {margin-bottom: 0; /* 最后两个li元素移除下边距 */}}}
相关文章:
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
css使用弹性盒,让每个子元素平均等分父元素的4/1大小 原本: ul {padding: 0;width: 100%;background-color: rgb(74, 80, 62);display: flex;justify-content: space-between;flex-wrap: wrap;li {/* 每个占4/1 */overflow: hidden;background-color: r…...
设计模式的学习思路
学习设计模式确实需要一定的时间和实践,尤其是对于刚入门的人来说,因为一开始可能会感到有些混淆,尤其是当多个设计模式看起来有相似之处时。本博客是博主学习设计模式的思路历程,大家可以一起学习进步。设计模式学习-CSDN博客 1…...
stereopy 查看 data.tl 的可用属性
为了查看 data.tl 的可用属性,您可以使用 Python 的内置函数,例如 dir() 或 vars(),具体操作如下: 1. 列出 data.tl 的所有属性 使用 dir() 来查看所有可用的属性和方法: # 列出所有属性 print(dir(data.tl))这将返回一个列表,包含所有可用的方法、属性和内部字段。 2.…...
【2024APMCM亚太杯A题】详细解题思路
A题 复杂场景下的水下图像增强研究 解题思路问题一图像统计分析技术一、检测 偏色 的技术二、检测 弱光 的技术三、检测 模糊 的技术 聚类算法 问题二问题三问题四完整论文与代码 解题思路 问题一 问题 1:请使用类似上文提到的图像统计分析技术,对附件 …...
用 React18 构建Tic-Tac-Toe(井字棋)游戏
下面是一个完整的 Tic-Tac-Toe(井字棋)游戏的实现,用 React 构建。包括核心逻辑和组件分离,支持两人对战。 1. 初始化 React 项目: npx create-react-app tic-tac-toe cd tic-tac-toe2.文件结构 src/ ├── App.js…...
数据结构及算法--排序篇
在 C 语言中,可以通过嵌套循环和比较运算符来实现常见的排序算法,比如冒泡排序、选择排序或插入排序 目录 基础算法: 1.冒泡排序(Bubble Sort) 2.选择排序(Selection Sort) 3.插入排序&…...
泷羽sec学习打卡-网络七层杀伤链1
声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 关于蓝队基础的那些事儿-Base1 基本的企业网络架构是怎样的呢?高层管理IT管理影子IT中央技术…...
【QT】绘图
个人主页~ 绘图 一、绘图1、基础内容2、绘制形状(1)线段(2)矩形(3)圆形(4)文本(5)画笔(6)画刷 3、绘制图片(1)…...
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
在与main.ts同级下的plugins文件夹(如果没有,新建一个)下建一个element.js文件(名字随便取) element.js文件内容如下: import ElementPlus from element-plus export default (app) > {console.log(app…...
Markdown语法说明
这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…...
推荐一款专业电脑护眼工具:CareUEyes Pro
CareUEyes Pro是一款非常好用的专业电脑护眼工具,软件小巧,界面简单,它可以自动过滤电脑屏幕的蓝光,让屏幕显示更加的不伤眼,更加舒适,有效保护你的眼睛,可以自定义调节屏幕的色调,从…...
对subprocess启动的子进程使用VSCode python debugger
文章目录 1 情况概要(和文件结构)2 具体设置和启动步骤2.1 具体配置Step 1 针对attach debugger到子进程Step 2 针对子进程的暂停(可选) Step 3 判断哪个进程id是需要的子进程 2.2 启动步骤和过程 3 其他问题解决3.13.2 ptrace: Operation not permitted…...
Django启用国际化支持(2)—实现界面内切换语言:activate()
文章目录 ⭐注意⭐1. 配置项目全局设置:启用国际化2. 编写视图函数3. 配置路由4. 界面演示5、扩展自动识别并切换到当前语言设置语言并保存到Session设置语言并保存到 Cookie ⭐注意⭐ 以下操作依赖于 Django 项目的国际化支持。如果你不清楚如何启用国际化功能&am…...
基于单片机的多功能跑步机控制系统
本设计基于单片机的一种多功能跑步机控制系统。该系统以STM32单片机为主控制器,由七个电路模块组成,分别是:单片机模块、电机控制模块、心率检测模块、音乐播放模块、液晶显示模块、语音控制模块、电源模块。其中,单片机模块是整个…...
VSCode 如何选中包含某个字母的所有行
文章目录 写在前面一、需求描述二、解决方法参考链接 写在前面 自己的测试环境:VSCode 一、需求描述 由于需要处理文件,需求是删除文件中包含某个字母的所有行。 二、解决方法 在 Visual Studio Code (VSCode) 中,如果你想选中所有包含某…...
CSRF保护--laravel进阶篇
laravel对csrf非常重视,专门针对csrf作出了很多的保护。如果您是刚刚接触laravel的路由不久,那么您可能对于web.php路由文件的post请求很疑惑,因为get请求很顺利,而post请求则可能会遭遇失败。其中一个失败的原因是由于laravel的c…...
计算机网络-理论部分(二):应用层
网络应用体系结构 Client-Server客户-服务器体系结构:如Web,FTP,Telnet等Peer-Peer:点对点P2P结构,如BitTorrent 应用层协议定义了: 交换的报文类型,请求or响应报文类型的语法字段的含义如何…...
k8s1.31版本最新版本集群使用容器镜像仓库Harbor
虚拟机 rocky9.4 linux master node01 node02 已部署k8s集群版本 1.31 方法 一 使用容器部署harbor (1) wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O /etc/yum.repos.d/docker-ce.repo yum -y install docker-ce systemctl enable docker…...
QT中使用json格式存取矩阵数据
在 Qt 中,可以通过 QJsonDocument 和 QJsonArray 方便地存取 JSON 格式的矩阵数据。以下是存储和读取矩阵数据的完整实现示例。 1. 矩阵存储为 JSON 将矩阵(QVector<QVector<double>> 或其他二维数组)存储为 JSON 文件。 实现代码 #include <QJsonArray&g…...
k8s 集群安装
安装rockylinux https://www.jianshu.com/p/a5fe20318b8e https://www.cnblogs.com/haoee/p/18290506 配置VirtualBox双网卡 https://www.cnblogs.com/ShineLeBlog/p/17580311.html https://zhuanlan.zhihu.com/p/341328334 https://blog.csdn.net/qq_36544785/article/deta…...
【项目实训】法律文书智能摘要系统6
本开发周期内,团队围绕系统的核心业务能力与底层技术架构取得了重大进展。我们不仅完成了面向用户的批量处理、法规知识库等关键功能模块,还从底层重构了AI助手的长程记忆机制,并夯实了文本处理管线与用户认证体系。各项开发工作均按计划推进…...
MPV_lazy终极指南:如何用懒人包快速提升视频播放体验?
MPV_lazy终极指南:如何用懒人包快速提升视频播放体验? 【免费下载链接】mpv_PlayKit 🔄 mpv player 播放器折腾记录 Windows conf | 中文注释配置 汉化文档 快速帮助入门 | mpv-lazy 懒人包 Win11 x64 config | 着色器 shader 滤镜 filter 整…...
标准化封装国产电源:钡特电源 VB50-24S24LD 与金升阳 URB2424LD-50WR3 同属工业高可靠
在工业电子系统设计中,工业 DC-DC 电源模块作为核心供电单元,其标准化程度、稳定性及适配性直接影响设备整体可靠性与研发效率。钡特电源 VB50-24S24LD 与金升阳 URB2424LD-50WR3 作为 50W 级国产工业 DC-DC 代表产品,均采用国际标准封装引脚…...
8.C# —— 随机数、DateTime时间、字符串
一、C# 随机数(伪随机 安全随机)1. 核心概念计算机中没有真正的随机数,生成的都是伪随机数(通过算法 种子计算得出)。种子相同 → 生成的随机数序列完全相同不指定种子 → 默认使用系统当前时间作为种子,…...
0603光刻机 第六篇:EUV超精密光学系统(S级 长期死磕突破)第3小节:超高纯氟化钙材料难点
第六篇:EUV超精密光学系统(S级 长期死磕突破) 第3小节:超高纯氟化钙材料难点(深紫外配套核心,全维度死磕解析) 前置硬核声明 氟化钙单晶(CaF₂)是DUV深紫外光刻核心光学基…...
Zed与VSCode争议背后真相:性能瓶颈到底是谁的锅
别被骗了!Zed比VS Code快?真正的原因让你哭笑不得!本文深入分析开发者社区对Zed编辑器与VS Code的争议,澄清性能瓶颈的真相在于语言服务器协议(LSP)而非编辑器本身,揭示Zed真正的优势在于原生Vim模式和架构简洁性&…...
Win11自带加密真香!手把手教你用‘属性加密’保护私密文件夹(附防忘密码小技巧)
Win11原生加密全指南:从基础设置到高阶安全实践 在数字时代,隐私保护已成为每个电脑用户的刚需。当你刚升级到Win11系统,面对全新的界面和操作逻辑,可能会对如何保护敏感文件感到困惑。第三方加密软件固然功能强大,但它…...
如何在Photoshop中构建AI原生工作流:SD-PPP的技术架构解析
如何在Photoshop中构建AI原生工作流:SD-PPP的技术架构解析 【免费下载链接】sd-ppp A Photoshop AI plugin 项目地址: https://gitcode.com/gh_mirrors/sd/sd-ppp 当我们谈论AI与创意工具的结合时,通常面临一个核心挑战:如何在保持专业…...
AzurLaneAutoScript深度解析:如何构建智能化的碧蓝航线自动化解决方案
AzurLaneAutoScript深度解析:如何构建智能化的碧蓝航线自动化解决方案 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研,全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript…...
希捷ST20000NM007D深度评测:20TB企业级硬盘,兼顾容量与稳定的实用之选
在企业存储领域,“容量”与“稳定”始终是核心诉求。随着大数据、云存储、边缘计算的快速发展,企业对存储设备的要求愈发严苛——既需要足够大的空间承载海量数据,又要保证724小时不间断运行的稳定性,同时还要控制功耗与运营成本。…...
