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

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

思路

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

  • 使用弹性布局和属性 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

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

nVisual 登录页页面配置说明

一、概述 nVisual登录页面可根据具体客户需要通过public\config\access.js文件进行自定义配置。页面可以大致分为4个部分&#xff0c;头部、底部、可移动区域以及页面中间的信息填写区域。其中头部和底部又包含头部左侧、头部中间、头部右侧、底部左侧、底部中间、底部右侧六个…...

后端接受前端传递数组进行批量删除

问题描述&#xff1a;当我们需要做批量删除功能的时候&#xff0c;我们循环单次删除的接口也能进行批量删除&#xff0c;但要删除100条数据就要调用100次接口&#xff0c;或者执行100次sql&#xff0c;这样系统开销是比较大的&#xff0c;那么我们直接采用接收的数组格式数据sq…...

拍频实例 - 一组恒力矩电流采样数据

这是一组功率电机的感应电流波形。加载了重载恒力矩设备。你能看到什么&#xff1f; 首先&#xff0c;时间轴的坐标是对的&#xff0c;9.9~10.0秒&#xff0c;单位是秒&#xff0c;100ms有5个波形&#xff0c;所以是20ms一个波形。这是50Hz的信号。频差就体现为幅度的周期起伏…...

Jvm之NativeMemoryTracking 使用

开启 Native Memory Tracking 通过 -XX:NativeMemoryTracking 开启&#xff1a; -XX:NativeMemoryTrackingoff:这是默认值&#xff0c;即关闭 Native Memory Tracking -XX:NativeMemoryTrackingsummary: 开启 Native Memory Tracking&#xff0c;但是仅仅按照各个 JVM 子系统…...

PKCS#7、Bit padding(位填充)、Byte padding(字节填充)、Zero padding(零填充)

PKCS#7、Bit padding&#xff08;位填充&#xff09;、Byte padding&#xff08;字节填充&#xff09;、Zero padding&#xff08;零填充&#xff09;是密码学常见的填充方式。 Bit padding&#xff08;位填充&#xff09;&#xff1a; 位填充可以应用于任意长度的消息。在消息…...

R语言学习笔记-1

1. 基础操作和函数 清空环境&#xff1a;rm(list ls()) 用于清空当前的R环境。 打印输出&#xff1a;print("Hello, world") 用于输出文本到控制台。 查看已安装包和加载包&#xff1a; search()&#xff1a;查看当前加载的包。install.packages("package_na…...

我在广州学 Mysql 系列之 数据“表”的基本操作

ℹ️大家好&#xff0c;我是&#x1f606;练小杰&#xff0c;今天主要讲得是Mysql数据表的基本操作内容~~ 昨天讲了“Mysql 数据“库“的基本操作”~~ 想要了解更多&#x1f236;️MYSQL 数据库的命令行总结&#xff01;&#xff01;&#xff01; “真相永远只有一个”——工藤…...

auto-gptq安装以及不适配软硬件环境可能出现的问题及解决方式

目录 1、auto-gptq是什么&#xff1f;2、auto-gptq安装3、auto-gptq不正确安装可能会出现的问题&#xff08;1&#xff09;爆出&#xff1a;CUDA extension not installed.&#xff08;2&#xff09;没有报错但是推理速度超级慢 1、auto-gptq是什么&#xff1f; Auto-GPTQ 是一…...

【R语言】基础知识

一、对象与变量 R语言中的所有事物都是对象&#xff0c;如向量、列表、函数&#xff0c;变量、甚至环境等。它的所有代码都是基于对象object的操作&#xff0c;变量只是调用对象的手段。 1、对象 在R语言中&#xff0c;对计算机内存的访问是通过对象实现的。 # 字符型向量 …...

【一本通】虫洞

【一本通】虫洞 C语言代码C代码JAVA代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; John在他的农场中闲逛时发现了许多虫洞。虫洞可以看作一条十分奇特的有向边&#xff0c;并可以使你返回到过去的一个时刻&#xff08;相对你进入虫洞之…...

python爬虫--小白篇【爬虫实践】

一、前言 1.1、王者荣耀皮肤爬虫 根据王者荣耀链接&#xff0c;将王者荣耀的全部英雄的全部皮肤图片爬取保存到本地。经过分析得到任务的三个步骤&#xff1a; 根据首页全部英雄列表连接获取全部英雄的名称hero_name以及对应的hero_id&#xff1b;根据单个英雄的hero_name和h…...

Unity背包道具拖拽(极简版实现)

&#xff08;感觉Csdn代码页面可以再大一点或者加个放大功能 不然得划着看不太舒服&#xff09; 1.关键接口&#xff0c;三个拖拽相关的 2.关键参数&#xff0c;PointerEventData 一直没仔细看过&#xff0c;其实有包含鼠标相关的很多参数&#xff0c;鼠标点击次数&#xff…...

spark读取普通文件

spark读取普通文件 txt文件 """ 将一行数据当做一个字段&#xff0c;需要自己切割 字段名称为value 表结构 可以从sql中搞 """ df spark.read.text("../../data/wordcount/input/data.txt") df spark.read.format("text"…...

MySQL SQL语句性能优化

MySQL SQL语句性能优化指南 一、查询设计优化1. 避免 SELECT *2. 使用 WHERE 进行条件过滤3. 避免在索引列上使用函数和表达式4. 使用 LIMIT 限制返回行数5. 避免使用子查询6. 优化 JOIN 操作7. 避免全表扫描 二、索引优化1. 使用合适的索引2. 覆盖索引3. 索引选择性4. 多列索引…...

【蓝桥杯每日一题】技能升级

技能升级 2024-12-10 蓝桥杯每日一题 技能升级 二分 题目大意 一个角色有 N 种可以增加攻击力的技能&#xff0c;对于第 i 个技能首次升级可以提升 A i A_i Ai​ 点攻击力&#xff0c;随后的每次升级增加的攻击力都会减少 B i B_i Bi​ 。升级 ⌈ A i B i ⌉ \lceil \frac{A…...

css 实现在一条线上流动小物体(offset-path)

直接贴代码,留几个参考网址给大家 【SVG】路径<Path>标签详解,一次搞懂所有命令参数 探秘神奇的运动路径动画 Motion Path <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport&quo…...

探索 Robyn 框架 —— 下一代高性能 Web 框架

技术博客&#xff1a;探索 Robyn 框架 —— 下一代高性能 Web 框架 什么是 Robyn&#xff1f; Robyn 是一个用 Rust 编写的高性能 Web 框架&#xff0c;旨在通过极简设计和高效并发处理&#xff0c;帮助开发者快速构建可扩展的现代 Web 应用。得益于 Rust 的内存安全性和性能…...

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

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

【MySQL 进阶之路】了解 性能优化 与 设计原则

1.B树的优势 “矮胖”结构&#xff1a; 矮&#xff1a;B树的每个节点存储更多的关键字&#xff0c;从而减少了树的层级&#xff08;最多三层&#xff09;&#xff0c;减少了磁盘I/O操作&#xff0c;提高了查询效率。胖&#xff1a;叶子节点存储实际的数据&#xff0c;并使用双…...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...