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

CSS伸缩盒模型(弹性盒子)

news 来源：原创 2025/8/21 13:24:56

伸缩盒模型（Flexbox，Flexible Box Layout）是 CSS 中一种一维布局模型，用于更高效地处理元素的对齐、分布和响应式布局。其核心思想是让容器内的子元素（称为“项目”）能够灵活地自动调整大小和位置以适应不同屏幕尺寸和内容变化。

1.核心特性

1.1容器与项目

容器：使用 display: flex 或 display: inline-flex 定义的父元素。

项目：容器内的直接子元素，默认沿容器的主轴排列。

1.2主轴与交叉轴

主轴（默认水平方向）：项目排列的方向。

交叉轴（垂直于主轴）：项目对齐的方向。

1.3关键属性

flex-direction：定义主轴方向（如 row, column）。

justify-content：控制项目在主轴上的对齐方式（如 flex-start, center, space-between）。

align-items：控制项目在交叉轴上的对齐方式（如 stretch, center）。

flex-wrap：允许项目换行（如 nowrap, wrap）。

align-self：单独调整某个项目的对齐方式。

1.4弹性伸缩

项目可通过 flex: grow/shrink 或 flex-basis 控制大小比例，默认均分可用空间。例如：flex: 1 表示项目可等比例扩展，flex: 2 0 auto 表示优先放大两倍。

2.优势

简化复杂布局：无需浮动或定位即可实现水平/垂直居中、多栏等效果。

响应式设计：自动适应屏幕尺寸变化，适合移动端开发。

代码简洁：减少冗余样式，提高维护性。

3.常见场景：

3.1导航栏（横向菜单）

3.2响应式图片轮播

3.3多栏布局（如博客侧边栏）

3.4表单元素对齐

4.示例代码

.container {display: flex;justify-content: space-between; /* 主轴两端对齐 */align-items: center;           /* 交叉轴居中对齐 */
}
.item {flex: 1; /* 等比例占据剩余空间 */min-width: 200px;
}

CSS伸缩盒模型(弹性盒子)

伸缩盒模型（Flexbox，Flexible Box Layout）是 CSS 中一种一维布局模型，用于更高效地处理元素的对齐、分布和响应式布局。其核心思想是让容器内的子元素（称为“项目”）能够灵活地自动调整大小和位置以适应不同…...

编程日记 2025/8/21 13:24:56

C++蓝桥杯基础篇（十一）

片头嗨~小伙伴们，大家好！今天我们来学习C蓝桥杯基础篇（十一），学习类，结构体，指针相关知识，准备好了吗？咱们开始咯~ 一、类与结构体类的定义：在C中&#x…...

编程日记 2025/8/21 13:23:04

版本控制泄露源码 .svn

##相关知识 SVN源码泄露 SVN（subversion）是源代码版本管理软件，造成 SVN 源代码漏洞的主要原因是管理员操作不规范。“ 在使用 SVN 管理本地代码过程中，会自动生成一个名为 .svn 的隐藏文件夹，其中包含重要的源代码信…...

编程日记 2025/8/21 13:24:56

基于单片机的风速报警装置设计

标题:基于单片机的风速报警装置设计内容:1.摘要本设计聚焦于基于单片机的风速报警装置，旨在解决传统风速监测缺乏实时报警功能的问题。采用单片机作为核心控制单元，结合风速传感器采集风速数据。经实验测试，该装置能准确测量 0 - 60m/s 范…...

编程日记 2025/8/21 13:23:04

YOLOv12本地部署教程——42%速度提升，让高效目标检测触手可及

YOLOv12 是“你只看一次”（You Only Look Once, YOLO）系列的最新版本，于 2025 年 2 月发布。它引入了注意力机制，提升了检测精度，同时保持了高效的实时性能。在保持速度的同时，显著提升了检测精度。例如&am…...

编程日记 2025/8/21 13:24:06

Banana Pi OpenWRT One Wifi6 OpenWrt社区官方开源路由器评测

第一款不可破解、开源、版权软件、符合 FCC、CE 和 RoHS 的维修权路由器 OpenWRT项目今年已经20岁了，为了纪念这一时刻，Banana Pi OpenWrt One/AP-24.XY路由器开发系统已经上市。这是OpenWRT团队与硬件公司的第一个联合项目。选择 Banana Pi，…...

编程日记 2025/8/21 13:19:46

【算法】经典排序算法介绍+代码示例

排序算法介绍 1）冒泡排序 (Bubble Sort)2）选择排序（Selection Sort）3）插入排序（Insertion Sort）4）希尔排序（Shell Sort）5）归并排序（Me…...

编程日记 2025/8/21 13:19:00

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加列宽调整功能,示例Table14_02带边框和斑马纹的固定表头表格

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…...

编程日记 2025/8/21 13:24:06

【Linux】线程控制

目录一、原生线程库： 二、线程控制： 1、线程创建： 2、线程等待： 自定义类型的接收对象： 编辑 3、线程终止： pthread_exit： pthread_cancel: 4、线程ID： 线程库的底层原…...

编程日记 2025/8/16 11:17:56

pyqt联合designer的运用和设置

PyQt Designer 简介 PyQt Designer 是一个用于创建和设计 PyQt 应用程序用户界面的可视化工具。它允许用户通过拖放方式添加和排列各种控件，如按钮、文本框、滑块等，并设置它们的属性和样式，从而快速构建出美观且功能完整的 UI 界面。 Windows版本：【免费】安装包别管啊啊…...

编程日记 2025/8/21 10:56:01

spring boot3.4.3+MybatisPlus3.5.5+swagger-ui2.7.0

使用 MyBatis-Plus 操作 books 表。我们将实现以下功能： 创建实体类 Book。创建 Mapper 接口 BookMapper。创建 Service 层 BookService 和 BookServiceImpl。创建 Controller 层 BookController。配置 MyBatis-Plus 和数据库连接。 1. 项目结构 src ├─…...

编程日记 2025/8/20 5:40:47

利用微软的 HTML 应用程序宿主程序的攻击

mshta.exe 是微软的 HTML 应用程序宿主程序（Microsoft HTML Application Host），属于 Windows 系统组件。它的核心功能是运行 .hta（HTML Application）文件，允许通过 HTML、JavaScript、VBScript 等技术创建交…...

编程日记 2025/8/17 19:25:13

【深度学习】读写文件

读写文件到目前为止，我们讨论了如何处理数据，以及如何构建、训练和测试深度学习模型。然而，有时我们希望保存训练的模型，以备将来在各种环境中使用（比如在部署中进行预测）。此外，当运行一个…...

编程日记 2025/8/16 9:55:06

一、Data.py # data负责产生两个dataloader from torch.utils.data import DataLoader, Dataset from sklearn.model_selection import train_test_split #给X,Y 和分割比例， 分割出来一个训练集和验证机的X, Y import torchdef read_file(path):data []label …...

编程日记 2025/8/20 11:35:57

Unity使用UGUI制作无限滑动列表

原理参照上一篇使用NGUI的制作无限滑动列表的文章 Unity 使用NGUI制作无限滑动列表_unity 滑动列表很多物体-CSDN博客准备工作： 新建一个空物体命名为LoopList，并调整其大小， 并增加Scroll Rect组件（用于滑动）、Re…...

编程日记 2025/8/18 17:15:16

ThinkPHP6用户登录系统的全过程

ThinkPHP6用户登录系统的全过程涉及请求处理、数据传输、路由分发、控制器逻辑、模型验证及中间件协作等多个模块的交互。详细的过程解析如下： 1. 前端请求与路由分发前端发起请求：用户在前端页面（如Vue组件或HTML表单）输入用户…...

编程日记 2025/8/17 21:42:09

C++全栈聊天项目(2) 单例模式封装Http管理者

完善注册类界面先在注册类构造函数里添加lineEdit的模式为密码模式 ui->lineEdit_Passwd->setEchoMode(QLineEdit::Password); ui->lineEdit_Confirm->setEchoMode(QLineEdit::Password);我们在注册界面的ui里添加一个widget，widget内部包含一个tip居…...

编程日记 2025/8/18 5:24:47

【鸿蒙开发】OpenHarmony调测工具hdc使用教程(设备开发者)

00. 目录文章目录 00. 目录01. OpenHarmony概述02. hdc简介03. hdc获取04. option相关的命令05. 查询设备列表的命令06. 服务进程相关命令07. 网络相关的命令08. 文件相关的命令09. 应用相关的命令10. 调试相关的命令11. 常见问题12. 附录 01. OpenHarmony概述 OpenHarmony是…...

编程日记 2025/8/18 19:01:16

ORACLE EBS数据库RELINK方式搭建克隆环境

ORACLE EBS系统的数据库，一般都安装了很多特定功能的小补丁来解决特定的BUG；因此对于已经安装好的系统，想要克隆一套测试环境、搭建一个新的备机做测试等，如果按照生产环境标准，则需要安装大量补丁，带来很大…...

编程日记 2025/8/16 11:38:05

MySQL regexp 命令

REGEXP命令是一种用于进行正则表达式匹配的运算符，允许在查询中使用正则表达式来匹配字符串模式‌‌1。基本语法基本的语法结构如下： SELECT * FROM table_name WHERE column_name REGEXP pattern; 这里，pattern是你要匹配的正则表达式模…...

编程日记 2025/8/21 12:17:22

前端实习到工作的经历

看了很多人的程序员生涯之路，我突然意识到我也该记录一些东西，因此有感而发。我是一个24届毕业生，大三下就开始找前端实习，当时学校不让走，我们都是先面着然后准备放假就去。当时周围小伙伴都找好了，考完…...

编程日记 2025/8/20 14:51:15

Vue3——Fragment

文章目录一、Fragment的核心意义1. 解决Vue2的单根限制问题2. 减少不必要的 DOM 嵌套3. 语义化和结构化二、Fragment 的实现原理三、Fragment 使用方式1. 基本用法2. 结合条件渲染3. 动态组件四、实际应用场景1. 列表/表格组件2. 布局组件3. 语义化标签五、注意事项1. 属性…...

编程日记 2025/8/16 12:43:24

Linux_16进程地址空间

CPU内的寄存器只有一套，但是CPU内寄存器的数据可能会有多份！ 一、程序地址空间下面这个图对应的是内存吗？（实际上是虚拟的进程地址空间） 32位机器内存最大为多少？ 32位操作系统的地址总线为32位&#x…...

编程日记 2025/8/18 13:49:50

职坐标机器学习编程实战：调试优化与自动化测试精要

内容概要在机器学习编程实践中，代码调试优化与自动化测试工具的应用是构建高可靠性系统的核心环节。本书聚焦从数据预处理到模型部署的全流程，通过特征工程优化、训练过程监控及持续集成方案的设计，系统化解决算法工程化中的典型问题。在特…...

编程日记 2025/8/18 13:12:07

git文件过大导致gitea仓库镜像推送失败问题解决（push failed: context deadline exceeded）

问题描述： 今天发现gitea仓库推送到某个镜像仓库的操作几个月前已经报错终止推送了，报错如下： 首先翻译报错提示可知是因为git仓库大小超过1G限制。检查本地.git文件，发现.git文件大小已达到1.13G。确定是.git文件过大导致&…...

编程日记 2025/8/16 12:29:58

llvm数据流分析

llvm数据流分析 1.数据流分析2.LLVM实现2.1.常量传播2.2.活跃性分析相关参考文档：DataFlowAnalysisIntro、ustc编译原理课程、南大程序分析课程1、南大程序分析课程2。 1.数据流分析数据流分析在编译优化等程序分析任务上都有重要应用。通常数据流分析可被抽象为…...

编程日记 2025/8/18 11:48:55

Vite为什么选用Rollup打包？

Vite 在生产阶段使用 Rollup 打包，但这不是唯一选择。它的设计背后有明确的权衡和考量，同时开发者也可以选择其他替代方案。一、为什么 Vite 默认使用 Rollup？ 1. Rollup 的核心优势 • Tree-shaking：Rollup 的静态分析能力极强&…...

编程日记 2025/8/16 9:54:29

Docker 入门与实战指南

Docker 入门与实战指南一、Docker 简介 Docker 是一个开源的容器化平台，允许开发者将应用程序及其依赖打包成一个可移植的容器。容器可以在任何安装了 Docker 的环境中运行，确保应用的一致性和可移植性。 1.1 为什么使用 Docker？ 环境一…...

编程日记 2025/8/16 9:54:39

C# 常用数据类型

C# 数据类型分为 ‌值类型‌、‌引用类型‌ 和 ‌特殊类型‌，以下是详细分类及对应范围/说明： 一、值类型（Value Types）‌ 值类型直接存储数据，分配在栈内存中，默认不可为 null。简单类型‌ 整数类型‌…...

编程日记 2025/8/16 9:54:37

深入解读 JavaScript 中 `this` 的指向机制：覆盖所有场景与底层原理

this 是 JavaScript 中最容易引发困惑的核心概念之一，它的指向在不同场景下呈现截然不同的行为。本文将系统性地解析 this 的所有使用场景，结合代码示例和底层原理，帮助你彻底掌握其运行机制。一、全局环境下的 this 1. 浏览器环境在浏览器…...

编程日记 2025/8/16 11:32:54

无人机全景应用解析与技术演进趋势

无人机全景应用解析与技术演进趋势 ——从立体安防到万物互联的空中革命一、现有应用场景全景解析 （一）公共安全领域 1. 立体安防体系空中哨兵：搭载 77 GHz 77\text{GHz} 77GHz毫米波雷达（探测距离 5 km 5\text{km} 5km&…...

编程日记 2025/8/16 12:44:23

手写简易Tomcat核心实现：深入理解Servlet容器原理

目录一、Tomcat概况 1. tomcat全局图 2.项目结构概览二、实现步骤详解 2.1 基础工具包（com.qcby.util） 2.1.1 ResponseUtil：HTTP响应生成工具 2.1.2 SearchClassUtil：类扫描工具 2.1.3 WebServlet：自定义注解…...

编程日记 2025/8/18 17:13:13

【音视频】ffmpeg命令提取像素格式

1、提取YUV数据提取yuv数据，并保持分辨率与原视频一致使用-pix_fmt或-pixel_format指定yuv格式提取数据，并保持原来的分辨率 ffmpeg -i music.mp4 -t "01:00" -pixel_format yuv420p music.yuv提取成功后，可以使用ffplay指定y…...

编程日记 2025/8/18 10:23:13

深度剖析Redis：双写一致性问题及解决方案全景解析

在高并发场景下，缓存与数据库的双写一致性是每个开发者必须直面的核心挑战。本文通过5大解决方案，带你彻底攻克这一技术难关！ 一、问题全景图：当缓存遇到数据库 1.1 典型问题场景 // 典型问题代码示例 public void updateProduc…...

编程日记 2025/8/18 15:32:36

Redis----大key、热key解决方案、脑裂问题

文章中相关知识点在往期已经更新过了，如果有友友不理解可翻看往期内容出现脑裂问题怎么保证集群还是高可用的什么是脑裂问题脑裂说的就是当我们的主节点没有挂，但是因为网络延迟较大，然后和主节点相连的哨兵通信较差，之后主…...

编程日记 2025/8/17 16:21:09

Android 调用c++报错 exception of type std::bad_alloc: std::bad_alloc

一、报错信息 terminating with uncaught exception of type std::bad_alloc: std::bad_alloc 查了那部分报错c++代码 szGridSize因为文件太大，初始化溢出了 pEGM->pData = new float[szGridSize]; 解决办法直接抛出异常，文件太大就失败吧最后还增加一个日志输出，给…...

编程日记 2025/8/16 10:00:34

【从零开始学习计算机科学】操作系统（五）处理器调度

【从零开始学习计算机科学】操作系统（五）处理器调度处理器调度一些简单的短程调度算法的思路先来先服务（First-Come-First-Served，FCFS）优先级调度及其变种最短作业优先调度算法（SJF）--非抢占式最短作业优先调度算法（SJF）--抢占式最高响应比优先调度算法轮转调度算法…...

编程日记 2025/8/16 11:43:01

LeetCode1871 跳跃游戏VII

LeetCode 跳跃游戏 IV：二进制字符串的跳跃问题题目描述给定一个下标从 0 开始的二进制字符串 s 和两个整数 minJump 和 maxJump。初始时，你位于下标 0 处（保证该位置为 0）。你需要判断是否能到达字符串的最后一个位置&#xf…...

编程日记 2025/8/19 21:03:26

ResNet50深度解析：原理、结构与PyTorch实现

ResNet50深度解析：原理、结构与PyTorch实现 1. 引言 ResNet（残差网络）是深度学习领域的一项重大突破，它巧妙解决了深层神经网络训练中的梯度消失/爆炸问题，使得构建和训练更深的网络成为可能。作为计算机视觉领域的里…...

编程日记 2025/8/18 1:18:47

MATLAB 控制系统设计与仿真 - 24

PID 控制器分析- 控制器的形式连续控制器的结构： 为滤波时间常数，这类PID控制器在MATLAB系统控制工具箱称为并联PID控制器，可由MATLAB提供的pid函数直接输入，格式为： 其他类型的控制器也可以由该函数直接输入&#x…...

编程日记 2025/8/16 12:25:41

数字IC后端设计实现教程 |Innovus ICC2 Routing Pin Access Setting设置方法

默认情况下routing 引擎可以在标准单元可以打孔的任何地方（via region）打孔，甚至工具还会先拉出一块metal，然后再打孔过渡到高层。随之工艺节点越做越小，标准单元内部的结构也越来越复杂。此时如果还沿用传统工艺的走…...

编程日记 2025/8/16 9:39:16

mysql经典试题共34题

1、准备数据 -- drop drop table if exists dept; drop table if exists emp; drop table if exists salgrade;-- CREATE CREATE TABLE dept (deptno int NOT NULL COMMENT 部门编号,dname varchar(14) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMM…...

编程日记 2025/8/15 20:59:30

网络编程-----服务器（多路复用IO 和 TCP并发模型）

一、单循环服务器模型 1. 核心特征 while(1){newfd accept();recv();close(newfd);}2. 典型应用场景 HTTP短连接服务（早期Apache）CGI快速处理简单测试服务器 3. 综合代码 #include <stdio.h> #include <sys/types.h> /* See NO…...

编程日记 2025/8/18 14:19:56

GitHub 项目版本管理与 Release 发布流程记录

GitHub 项目版本管理与 Release 发布流程记录 1. 项目环境设置 1.1 打开 VS Code 并进入项目目录 E:\adb\Do>code .1.2 配置 Git 用户信息 E:\adb\Do>git config --global user.name "n" E:\adb\Do>git config --global user.email "**gmail.com&q…...

编程日记 2025/8/20 8:59:52

GStreamer —— 2.15、Windows下Qt加载GStreamer库后运行 - “播放教程 1：Playbin 使用“（附：完整源码）

运行效果介绍我们已经使用了这个元素，它能够构建一个完整的播放管道，而无需做太多工作。本教程介绍如何进一步自定义，以防其默认值不适合我们的特定需求。将学习： • 如何确定文件包含多少个流，以及如何切换其中。…...

编程日记 2025/8/18 20:19:22

Python+DeepSeek：开启AI编程新次元——从自动化到智能创造的实战指南

文章核心价值技术热点：结合全球最流行的编程语言与国产顶尖AI模型实用场景：覆盖代码开发/数据分析/办公自动化等高频需求流量密码：揭秘大模型在编程中的创造性应用目录结构环境搭建：5分钟快速接入DeepSeek场景一：AI辅助代码开发（智能补全+调试）场景二：数据分析超级助…...

编程日记 2025/8/18 11:52:00

使用OpenCV和MediaPipe库——驼背检测（姿态监控）

目录驼背检测的运用 1. 驾驶姿态与疲劳关联分析 2. 行业应用案例 1. 教育场景痛点分析 2. 智能教室系统架构代码实现思路 1. 初始化与配置 2. MediaPipe和摄像头设置 3. 主循环 4. 资源释放 RGB与BGR的区别一、本质区别二、OpenCV的特殊性内存结构示意图&…...

编程日记 2025/8/21 6:43:14

maven的项目构建

常用构建命令命令说明mvn clean清理编译结果（删掉target目录）mvn compile编译核心代码，生成target目录mvn test-compile编译测试代码，生成target目录mvn test执行测试方法mvn package打包，生成jar或war文件mvn insta…...

编程日记 2025/8/19 8:58:23