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

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

news 2025/9/16 6:58:56

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

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/9/8 2:34:58

渗透实战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/9/13 22:56:28

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/9/11 12:54:55

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/8/15 2:04:44

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2025/9/2 18:32:32

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2025/9/5 16:57:18

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2025/9/2 16:52:33

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

编程新知 2025/9/10 4:50:28

云原生周刊：k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

编程新知 2025/8/4 12:28:02