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

《CSS 知识点》大屏卡片布局思路：弹性布局 flex-grow

news 来源：原创 2025/6/27 4:41:03

思路

大屏左右两侧高宽一致，内部卡片可按比例设置！

使用弹性布局和属性 flex-grow 设置比例；
间隔使用 margin-bottom 设置，最后一个卡片不设置；

效果如图

在这里插入图片描述

代码说明

CSS代码 26 - 30，左右两侧设置弹性布局；
CSS代码 34 - 40，设置卡片直接的间隔，最后一个不设置；
Html代码 4 - 6,9 - 11，设置卡片比例；

<template><div class="scrollbar-main"><div class="left-cards"><div style="flex-grow: 3;"></div><div style="flex-grow: 2;" ></div><div style="flex-grow: 5;" ></div></div><div class="right-cards"><div style="flex-grow: 2;"></div><div style="flex-grow: 1;" ></div><div style="flex-grow: 1;" ></div></div></div>
</template><style lang="scss" scoped>
.scrollbar-main {position: absolute;top: 0;bottom: 0;left: 0;right: 0;.left-cards,.right-cards {position: absolute;top: 10px;bottom: 10px;display: inline-flex;flex-direction: column;width: 350px;overflow: auto;background: #ccc;>div{background: #999;margin-bottom: 10px;}>div:last-child{margin-bottom: 0;}}.left-cards {left: 10px;}.right-cards {right: 10px;}
}
</style>

flex-grow

W3school flex-grow

在这里插入图片描述

《CSS 知识点》大屏卡片布局思路：弹性布局 flex-grow

思路大屏左右两侧高宽一致，内部卡片可按比例设置！ 使用弹性布局和属性 flex-grow 设置比例；间隔使用 margin-bottom 设置，最后一个卡片不设置； 效果如图代码说明 CSS代码 26 - 30，左右两侧设置弹性布…...

编程日记 2025/6/27 4:41:03

ceph单节点部署方式

准备一台单节点虚拟机，2C4G 三个50G的SCSi类型的磁盘 0. 关闭防火墙/关闭SELinux/下载podman/配置时间同步 systemctl disable --now firewalld setenforce 0 vim /etc/sysconfig/selinux SELINUXenforcing 修改为 SELINUXdisabled yum install podman -y sed -…...

编程日记 2025/6/24 9:10:52

【人工智能】OpenAI O1模型：超越GPT-4的长上下文RAG性能详解与优化指南

在人工智能（AI）领域，长上下文生成与检索（RAG） 已成为提升自然语言处理（NLP）模型性能的关键技术之一。随着数据规模与应用场景的不断扩展，如何高效地处理海量上下文信息，成…...

编程日记 2025/6/26 9:01:17

Qt如何将字串显示成二维码以供扫码识别

在Qt中可以使用QRcode来生成二维码，本质上说，其实是把一串信息生成二维码形式的图片。首先介绍下QRcode，QRCode原本是一个用于生成二维码的 JavaScript 库，在Qt中大佬们将其改成C语言实现。现直接放出来，使用的时候直…...

编程日记 2025/6/22 13:58:15

【Golang】如何读取并解析SQL文件

一、背景在数据库开发与维护过程中，我们经常需要执行大量的SQL语句。有时，这些SQL语句会被保存在一个文件中，以便于批量执行。为了方便地在Go语言中处理这些SQL文件，我们可以编写一个函数来读取并解析SQL文件中的语句。二、实…...

编程日记 2025/6/27 4:30:51

图形学笔记 - 5. 光线追踪 - RayTracing

Whitted-Style Ray tracing 为什么要光线追踪光栅化不能很好地处理全局效果软阴影尤其是当光线反射不止一次的时候栅格化速度很快，但质量相对较低光线追踪是准确的，但速度很慢光栅化：实时，光线追踪：离线~10K …...

编程日记 2025/6/26 10:09:53

WHY - 为什么选择 Rsbuild

目录一、介绍二、工具对比三、性能 https://rsbuild.dev/zh/guide/start/index 一、介绍 Rsbuild 是由 Rspack 驱动的高性能构建工具，它默认包含了一套精心设计的构建配置，提供开箱即用的开发体验，并能够充分发挥出 Rspack 的性能优势。二…...

编程日记 2025/6/24 21:26:21

前端(模块化)

未使用模块化定义两个js文件simple1.js和simple2.js let a11; let a11; 两个js文件变量重名在html测试传统引入js文件 <script src"./simple1.js"></script> <script src"./simple2.js"></script> 浏览器报错使用模块…...

编程日记 2025/6/27 4:38:18

Elasticsearch:Mapping-映射

一、创建索引自动生成索引字段数据类型即自动映射创建之前，先删除索引防止重复创建删除索引: DELETE product_mapping创建索引 product_mapping并且赋值 PUT /product_mapping/_doc/1 {"name": "xiaomi phone","desc": "s…...

编程日记 2025/6/26 18:32:25

掘金电影市场的新机遇：开发特惠电影票小程序api文档

随着电影市场的不断扩大，特惠电影票小程序成为创业者和企业争相布局的新蓝海。本文将带你深入了解特惠电影票小程序的开发要点，以及如何通过这个项目实现盈利。项目背景及市场分析电影市场规模的不断扩大为特惠电影票小程序提供了广阔的市场空间。根…...

编程日记 2025/6/25 1:23:23

EFAK kafka可视化管理工具部署使用

简介：EFAK是开源的可视化和管理软件。它允许您查询、可视化、提醒和探索您的指标，无论它们存储在何处。简单来说，它为您提供了将 Kafka 集群数据转换为漂亮的图形和可视化效果的工具。环境：①操作系统：CentOS7.6&…...

编程日记 2025/6/26 1:12:04

---mysql server: Ubuntu Linux下最最基本的操作

作为开发人员你不需要做复杂的mysql server的各种维护操作, 只是想在本机或虚拟机做个server，然后整测试性数据库. 下面我给出最最简单的基本操作: Ubuntu安装完mysql server, 并且后，可以做如下基本操作，就表示可以了你可以在这个基…...

编程日记 2025/6/26 12:58:27

Ariba Procurement: Administration_Master data

采购主数据集成Procurement Master Data Integration 注意：并非所有元素都是必需的，数据元素的名称可能根据ERP的不同，有所不同。 Types of Master Data Accounting 在SAP Ariba中的各种会计元素字段中，填充有效值选择列表。建…...

编程日记 2025/6/26 23:11:10

Not using native diff for overlay2, this may cause degraded performance……

问题现象案例：Anolis 8.9（4.19.91-26.an8.x86_64） Overlay2存储驱动程序） 当我们安装好Docker之后，通过systemctl status docker -l 会发现有一个告警信息：levelwarning msg"Not using native dif…...

编程日记 2025/6/22 20:43:51

【自然语言处理与大模型】使用llama.cpp将HF格式大模型转换为GGUF格式

llama.cpp的主要目标是在本地和云端的各种硬件上以最小的设置和最先进的性能实现LLM推理。是一个专为大型语言模型（LLM）设计的高性能推理框架，完全使用C和C编写，没有外部依赖，这使得它可以很容易地被移植到不同的操作系…...

编程日记 2025/6/24 10:24:51

item2 for macos

安装Item2 brew install iterm2 查看终端类型 cat /etc/shells Mac OS X 10.15 已经将默认的shell从Bash换成了zsh，所以不用安装，10.15以前的可以使用下面的命令进行安装 brew install zsh 安装Oh My ZSH # curl sh -c "$(curl -fsSL https://ra…...

编程日记 2025/6/22 8:16:49

docker命令

目录 docker buildwgetdocker rundocker compose为什么docker compose比docker build 和run快很多？ docker build docker build -t mineru:latestdocker build 命令是 Docker 的核心命令之一，用于从 Dockerfile 构建新的 Docker 镜像。 docker build&am…...

编程日记 2025/6/26 17:30:38

OrangePi Zero2 驱动开发

目录一. 芯片手册 1. 资料下载地址 2. 阅读芯片手册 2.1 GPIO 寄存器的基地址是（0x0300B000） 2.2 PC_CFG0 寄存器的偏移量（0x0048） 2.3 PC_CFG1 的偏移量（0x004C） 2.4 PC_CFG2 的偏移量（0x0050） 2.5 PC_DAT寄存器的偏移量（0x0058）二. 驱动代码调试 2.1 …...

编程日记 2025/6/24 19:40:31

C/C++字符数组与字符串操作

C/C字符数组与字符串操作录入字符 scanf("%c",&字符变量); 字符变量 getchar(); #include <stdio.h> int main() {char ch;while ((ch getchar()) ! EOF) {putchar(ch);}return 0; }上述程序会在文件结尾后结束循环，在命令行中运行&#…...

编程日记 2025/6/26 10:38:32

动手学深度学习---线性神经网络

一、线性回归解析解：模型的解可以用一个公式简单的表示，这类解叫做解析解。超参数：可以调整但不在训练过程中更新的参数称为超参数。调参是选择超参数的过程。超参数通常是我们根据训练迭代结果来调整的。在无法得到解析解的情况下…...

编程日记 2025/6/27 2:11:15

24计算机考研，东南大学和电子科技大学如何选择？

针对题主的情况，更推荐成电。成电上岸更为简单，就业前景也非常不错，性价比相当高。如果基础很扎实、更注重学校牌子、或是未来想在江浙沪发展的同学，东南大学是个很好的选择。下面就从学校综合实力、招录情况、考试难度来详细对比…...

编程日记 2025/6/23 6:32:38

Redis应用-在用户数据里的应用

1.社区电商的业务闭环接下来介绍的社区电商是以Redis作为主体技术、以MySQL和RocketMQ作为辅助技术实现的。 (1)社区电商运作模式社区电商的关键点在于社区，而电商则是辅助性质(次要地位，流量变现)。社区可以分成很多种社区，比如美食社区、美妆社区、影评社区、妈妈社区…...

编程日记 2025/6/25 17:49:13

STL容器-map P3613【深基15.例2】寄包柜普及-

题目来源：洛谷题库文章目录 map例题map知识点map使用注意：map的常用用法 map例题 P3613【深基15.例2】寄包柜普及- 题意根据数据插入/查询思路 map键值对可以根据柜子编号查找物品，但是柜子又有很多个，考虑数组或者map数组…...

编程日记 2025/6/27 4:36:56

excel使用笔记

1.工作表1计算工作表2某列的和假设我们有两个工作表，分别命名为“Sheet1”和“Sheet2”，我们想要求和这两个工作表中A1到A**单元格的数据，可以在任意一个工作表的单元格中输入以下公式： SUM(Sheet1!A1:A10, Sheet2!A1:A10) SUM…...

编程日记 2025/6/23 19:18:20

EasyGBS点对点穿透P2P远程访问技术在安防视频监控中的应用

随着信息技术的快速发展，安防视频监控系统在公共安全领域的应用变得越来越广泛。传统的视频监控系统多依赖于中心服务器进行视频流的集中处理和分发，这不仅增加了网络带宽的负担，还可能成为系统性能瓶颈。为了解决这些问题，P2P&am…...

编程日记 2025/6/26 12:38:46

【MySQL中多表查询和函数】

目录 1.多表查询 1.1 外键 1.2 链接查询 2.MySQL函数内置函数简介数值函数字符串函数时间日期函数条件判断操作开窗函数 1.多表查询本质：把多个表通过主外键关联关系链接（join）合并成一个大表，在去单表查询操作…...

编程日记 2025/6/25 8:02:16

Polars数据聚合与旋转实战教程

在这篇博文中，我们的目标是解决数据爱好者提出的一个常见问题：如何有效地从Polars DataFrame中创建汇总视图，以便在不同时间段或类别之间轻松进行比较。我们将使用一个实际的数据集示例来探索实现这一目标的各种方法。 Polars简介 Polars 是…...

编程日记 2025/6/22 7:02:55

SpringBoot【十三(准备篇)】集成在线接口文档Swagger2

一、前言🔥 环境说明：Windows10 Idea2021.3.2 Jdk1.8 SpringBoot 2.3.1.RELEASE 二、swagger介绍我就不卖关子啦，相信在座的各位很多都已经用过，但是没关系，只要全世界还有一个没用过，我都会给他讲。那…...

编程日记 2025/6/4 15:27:54

CKA认证 | Day6 K8s网络

第六章 Kubernetes网络 1、Service 控制器在 Kubernetes (K8S) 中，Service 控制器是一个关键组件，负责管理 Kubernetes 服务的生命周期和实现其功能。Service 控制器确保服务能够正确地将流量路由到后端 Pod，并处理服务的负载均衡和 DNS …...

编程日记 2025/6/25 13:59:11

基于Llamaindex的网页内容爬取实战

目的本文不关注如何解析网页 html 元素和各种 python 爬虫技术，仅作为一种网页数据的预处理手段进行研究。Llamaindex 也并不是爬虫技术的集大成者，使用它是为了后续的存查一体化。安装依赖 pip install llama-index-readers-web # pip install llam…...

编程日记 2025/6/27 4:31:58

springboot429校运会管理系统(论文+源码)_kaic

摘要传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数据费事费力。因此，在计算机上安装校运会管理系统软件来发挥其高效地信息处理的作用&#xff…...

编程日记 2025/6/21 22:29:17

tcpdump编译

https://github.com/westes/flex/releases/download/v2.6.4/flex-2.6.4.tar.gz tar -zxvf flex-2.6.4.tar.gz ./configure CFLAGS-D_GNU_SOURCE make sudo make installwget http://ftp.gnu.org/gnu/bison/bison-3.2.1.tar.gz ./configure make sudo make install以上两个库是…...

编程日记 2025/6/26 20:50:59

思路

代码说明

flex-grow

相关文章：