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

display:flex布局，最简单的案例

news 2025/11/5 20:52:07

1. 左右贴边

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#parent{width: 800px;background: red;height: 200px;display: flex;justify-content: space-between;}#parent span{width: 100px;height: 100px;background: yellow;}</style>
</head>
<body><div id="parent"><span>1</span><span>2</span><span>3</span></div></body>
</html>

2.左右不贴边

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#parent{width: 800px;background: red;height: 200px;display: flex;justify-content: space-around;}#parent span{width: 100px;height: 100px;background: yellow;}</style>
</head>
<body><div id="parent"><span>1</span><span>2</span><span>3</span></div></body>
</html>

 

 3.元素自动换行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#parent{width: 600px;background: red;height: 300px;display: flex;/*flex布局中，默认的子元素是不换行的nowrap， 如果装不开，会缩小子元素的宽度，放到父元素里面*/flex-wrap: wrap;/*换行*/}#parent span{width: 100px;height: 100px;background: yellow;margin: 5px;}</style>
</head>
<body><div id="parent"><span>1</span><span>2</span><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span><span>3</span></div></body>
</html>

4.垂直居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#parent{width: 600px;background: red;height: 300px;display: flex;/*默认的主轴是 x轴 row */justify-content: center;/*我们需要一个侧轴居中*/align-items: center;}#parent span{width: 100px;height: 100px;background: yellow;margin: 5px;}</style>
</head>
<body>
<div id="parent"><span>1</span><span>2</span><span>3</span></div>
</body>
</html>

 

5.子元素的高度自适应父元素（拉伸）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#parent{width: 600px;background: red;height: 300px;display: flex;/*默认的主轴是 x轴 row */justify-content: center;/*拉伸，但是子盒子不要给高度*/align-items:stretch;}#parent span{width: 100px;background: yellow;margin: 5px;}</style>
</head>
<body>
<div id="parent"><span>1</span><span>2</span><span>3</span></div>
</body>
</html>

 

 

相关文章：

display:flex布局，最简单的案例

1. 左右贴边 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>#parent{width: 800px;background: red;height: 200px;display: flex;justify-content: space-between…...

编程日记 2024/8/12 11:02:47

SQL注入实例（sqli-labs/less-17）

0、初始网页 1、确定闭合字符 注入点在于password框&#xff0c;闭合字符为单引号 2、爆库名 1 and updatexml(1,concat(0x7e,database(),0x7e),1)# 1 and (select 1 from (select count(*),concat((select database()),floor(rand()*2))x from information_schema.tables gr…...

编程日记 2024/8/12 11:01:45

HTML+CSS+JS计算器

效果图 计算器功能详解 本计算器实现了多种功能&#xff0c;以下是所有功能的详细说明&#xff1a; 清空显示框 © 功能: 清除显示框中的所有内容。解释: 该功能用于重置计算器状态&#xff0c;清空当前输入的内容&#xff0c;使用户可以重新开始输入。 输入数字 (0-9) 功…...

编程日记 2024/8/12 10:59:43

EasyCVR视频汇聚平台云计算技术核心优势：高效、灵活与可扩展性深度解读

随着科技的飞速发展和社会的不断进步&#xff0c;视频监控已经成为现代社会治安防控、企业管理等场景安全管理中不可或缺的一部分。在这一背景下&#xff0c;EasyCVR视频汇聚平台凭借其强大的云计算技术&#xff0c;展现出了卓越的性能和广泛的应用前景。本文将深入解析EasyCVR…...

编程日记 2024/8/12 10:58:42

JavaScript高阶笔记总结（Xmind格式）：第一天

Xmind鸟瞰图&#xff1a; 简单文字总结&#xff1a; js高阶知识总结&#xff1a; 理解Object&#xff1a; 1.返回一个由一个给定对象的自身可枚举属性组成的数组&#xff1a;Object.keys(对象名) 2.in 判断属性是否存在&#xff1a;"属性名" in 对象名 …...

编程日记 2024/8/12 10:57:41

十三、代理模式

文章目录 1 基本介绍2 案例2.1 Sortable 接口2.2 BubbleSort 类2.3 SortTimer 类2.4 Client 类2.5 Client 类的运行结果2.6 总结 3 各角色之间的关系3.1 角色3.1.1 Subject ( 主体 )3.1.2 RealObject ( 目标对象 )3.1.3 Proxy ( 代理 )3.1.4 Client ( 客户端 ) 3.2 类图 4 动态…...

编程日记 2024/8/12 10:55:38

Unity物理模块 之 2D效应器

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正​ 1.什么是效应器 2D 效应器 - Unity 手册 2D 效应器是与 2D 碰撞器一起使用的组件&#xff0c;相当于预先编写好的插…...

编程日记 2024/8/12 10:53:34

一款手机壳凭什么卖800元？Casetify品牌策略全解析 | 品牌出海

Casetify官网 巴黎奥运会&#xff0c;张怡宁的手机壳火了。 张怡宁在现场观战并使用手机的照片在网上流传&#xff0c;不是因为这位奥运前冠军&#xff0c;而是她的手机壳。这款满是「花花绿绿」图案的手机壳&#xff0c;迅速被网友发掘出是Casetify品牌的名为「炫彩花卉」的…...

编程日记 2024/8/12 10:48:27

【Rust光年纪】并发编程利器：探索 Rust 异步库与并行处理工具

构建高效异步应用&#xff1a;Rust 异步库详细解读 前言 在当今软件开发领域&#xff0c;Rust语言作为一种快速、安全和并发性能出色的编程语言&#xff0c;备受开发者青睐。随着Rust生态系统的不断扩大&#xff0c;越来越多的异步库和并行处理工具被引入到Rust开发中。本文将…...

编程日记 2024/8/12 10:47:25

机器学习第一课

1.背景 有监督学习&#xff1a;有标签&#xff08;连续变量&#xff08;回归问题&#xff1a;时间序列等&#xff09;、分类变量&#xff08;分类&#xff09;&#xff09; 无监督学习&#xff1a;没有标签&#xff08;聚类、关联&#xff08;相关性分析&#xff1a;哪些相关…...

编程日记 2024/8/12 10:45:22

C语言典型例题32

《C程序设计教程&#xff08;第四版&#xff09;——谭浩强》 习题2.9 编程序用getchar函数读入两个字符给c1&#xff0c;c2&#xff0c;然后分别用putchar函数和printf函数输出这两个字符。 &#xff08;1&#xff09;变量c1&#xff0c;c2应该定义为字符型或者整型吗&#x…...

编程日记 2024/8/12 10:44:21

第二十五天学习笔记2024.8.9

1、通过frp内网穿透共享数据库信息 [root1 ~]# mysql -p密码 mysql> create user li% identified by 1; mysql> create database test; mysql> grant all on test.* to li; [root1 ~]# tar -xf frp_0.33.0_linux_amd64.tar.gz [root1 ~]# cd frp_0.33.0_linux_a…...

编程日记 2024/8/12 10:43:20

sqlserver将一张表导出成txt

bcp zjwb_sb_20111122.dbo.ep_pb_groupvisitplace out c:/1.txt -n -U sa -P sa...

编程日记 2024/8/12 10:42:19

YOLOv8+DeepSort实现

目录 1&#xff0c;YOLOv8算法简介 2&#xff0c;DeepSort算法介绍 1. SORT目标追踪 3&#xff0c;实现流程 1.检测 2. 生成detections 3. 卡尔曼滤波预测 4.使用匈牙利算法将预测后的tracks和当前帧中的detections进行匹配 5. 卡尔曼滤波更新 4&#xff0c;代码实现 …...

编程日记 2024/8/12 10:41:17

「链表」链表原地算法合集：原地翻转|原地删除|原地取中|原地查重 / LeetCode 206|237|2095|287（C++）

概述 对于一张单向链表&#xff0c;我们总是使用双指针实现一些算法逻辑&#xff0c;这旨在用常量级别空间复杂度和线性时间复杂度来解决一些问题。 所谓原地算法&#xff0c;是指不使用额外空间的算法。 现在&#xff0c;我们利用双指针实现以下四种行为。 //Definition fo…...

编程日记 2024/8/12 10:39:15

【STM32】SPI通信和RTC实时时钟

个人主页~ SPI通信和RTC实时时钟 SPI通信一、简介二、硬件电路三、基本原理四、SPI时序1、时序基本单元2、时序 五、FLASH操作注意事项1、写入操作2、读取操作 六、SPI外设1、简介2、结构 七、传输方式1、主模式全双工连续传输2、非连续传输 RTC实时时钟一、Unix时间戳二、BKP1…...

编程日记 2024/8/12 10:38:14

DAMA学习笔记(十三)-大数据和数据科学

1.引言 大数据不仅指数据的量大&#xff0c;也指数据的种类多&#xff08;结构化的和非结构化的&#xff0c;文档、文件、音频、视频、流数据等&#xff09;&#xff0c;以及数据产生的速度快。数据科学家是指从从数据中探究、研发预测模型、机器学习模型、规范性模型和分析方法…...

编程日记 2024/8/12 10:37:13

【Java】Java 中的 toLowerCase() 方法详解

我最爱的那首歌最爱的angel 我到什么时候才能遇见我的angel 我最爱的那首歌最爱的angel 我不是王子也会拥有我的angel &#x1f3b5; 张杰《云中的angel》 在 Java 编程中&#xff0c;字符串处理是一个非常常见的任务。为了便于开发者操作和格式化字符串&…...

编程日记 2024/8/12 10:36:11

Linux: 进程概念详解

1. 冯诺依曼体系结构 截至目前&#xff0c;我们所认识的计算机&#xff0c;都是有一个个的硬件组件组成 。 【注意】&#xff1a; a. 这里的存储器指的是内存 b. 不考虑缓存情况&#xff0c;这里的CPU能且只能对内存进行读写&#xff0c;不能访问外设(输入或输出设备) c.外…...

编程日记 2024/8/12 10:35:10

【C++】模板详细讲解（含反向迭代器）

欢迎来到我的Blog&#xff0c;点击关注哦&#x1f495; 前言&#xff1a; C的模板在是泛型编程的重要组成部分&#xff0c;编写在不同类型上工作的代码&#xff0c;而无需为每个类型编写重复的代码&#xff0c;这有助于减少代码冗余并提高代码的可维护性。 模板 模板的介绍 …...

编程日记 2024/8/12 10:33:08

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/11/4 21:07:42

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2025/11/1 16:04:43

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2025/11/4 1:51:59

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/10/28 15:49:23

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/10/23 13:28:30

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/10/27 12:32:57

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2025/10/27 6:30:35

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2025/10/25 23:25:23