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;}#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…...
SQL注入实例（sqli-labs/less-17）
0、初始网页 1、确定闭合字符 注入点在于password框，闭合字符为单引号 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…...
HTML+CSS+JS计算器
效果图 计算器功能详解 本计算器实现了多种功能，以下是所有功能的详细说明： 清空显示框 © 功能: 清除显示框中的所有内容。解释: 该功能用于重置计算器状态，清空当前输入的内容，使用户可以重新开始输入。 输入数字 (0-9) 功…...
EasyCVR视频汇聚平台云计算技术核心优势：高效、灵活与可扩展性深度解读
随着科技的飞速发展和社会的不断进步，视频监控已经成为现代社会治安防控、企业管理等场景安全管理中不可或缺的一部分。在这一背景下，EasyCVR视频汇聚平台凭借其强大的云计算技术，展现出了卓越的性能和广泛的应用前景。本文将深入解析EasyCVR…...
JavaScript高阶笔记总结（Xmind格式）：第一天
Xmind鸟瞰图： 简单文字总结： js高阶知识总结： 理解Object： 1.返回一个由一个给定对象的自身可枚举属性组成的数组：Object.keys(对象名) 2.in 判断属性是否存在："属性名" in 对象名 …...
十三、代理模式
文章目录 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 动态…...
Unity物理模块 之 2D效应器
本文仅作笔记学习和分享，不用做任何商业用途 本文包括但不限于unity官方手册，unity唐老狮等教程知识，如有不足还请斧正 1.什么是效应器 2D 效应器 - Unity 手册 2D 效应器是与 2D 碰撞器一起使用的组件，相当于预先编写好的插…...
一款手机壳凭什么卖800元？Casetify品牌策略全解析 | 品牌出海
Casetify官网 巴黎奥运会，张怡宁的手机壳火了。 张怡宁在现场观战并使用手机的照片在网上流传，不是因为这位奥运前冠军，而是她的手机壳。这款满是「花花绿绿」图案的手机壳，迅速被网友发掘出是Casetify品牌的名为「炫彩花卉」的…...
【Rust光年纪】并发编程利器：探索 Rust 异步库与并行处理工具
构建高效异步应用：Rust 异步库详细解读 前言 在当今软件开发领域，Rust语言作为一种快速、安全和并发性能出色的编程语言，备受开发者青睐。随着Rust生态系统的不断扩大，越来越多的异步库和并行处理工具被引入到Rust开发中。本文将…...
机器学习第一课
1.背景 有监督学习：有标签（连续变量（回归问题：时间序列等）、分类变量（分类）） 无监督学习：没有标签（聚类、关联（相关性分析：哪些相关…...
C语言典型例题32
《C程序设计教程（第四版）——谭浩强》 习题2.9 编程序用getchar函数读入两个字符给c1，c2，然后分别用putchar函数和printf函数输出这两个字符。 （1）变量c1，c2应该定义为字符型或者整型吗&#x…...
第二十五天学习笔记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…...
sqlserver将一张表导出成txt
bcp zjwb_sb_20111122.dbo.ep_pb_groupvisitplace out c:/1.txt -n -U sa -P sa...
YOLOv8+DeepSort实现
目录 1，YOLOv8算法简介 2，DeepSort算法介绍 1. SORT目标追踪 3，实现流程 1.检测 2. 生成detections 3. 卡尔曼滤波预测 4.使用匈牙利算法将预测后的tracks和当前帧中的detections进行匹配 5. 卡尔曼滤波更新 4，代码实现 …...
「链表」链表原地算法合集：原地翻转|原地删除|原地取中|原地查重 / LeetCode 206|237|2095|287（C++）
概述 对于一张单向链表，我们总是使用双指针实现一些算法逻辑，这旨在用常量级别空间复杂度和线性时间复杂度来解决一些问题。 所谓原地算法，是指不使用额外空间的算法。 现在，我们利用双指针实现以下四种行为。 //Definition fo…...
【STM32】SPI通信和RTC实时时钟
个人主页~ SPI通信和RTC实时时钟 SPI通信一、简介二、硬件电路三、基本原理四、SPI时序1、时序基本单元2、时序 五、FLASH操作注意事项1、写入操作2、读取操作 六、SPI外设1、简介2、结构 七、传输方式1、主模式全双工连续传输2、非连续传输 RTC实时时钟一、Unix时间戳二、BKP1…...
DAMA学习笔记(十三)-大数据和数据科学
1.引言 大数据不仅指数据的量大，也指数据的种类多（结构化的和非结构化的，文档、文件、音频、视频、流数据等），以及数据产生的速度快。数据科学家是指从从数据中探究、研发预测模型、机器学习模型、规范性模型和分析方法…...
【Java】Java 中的 toLowerCase() 方法详解
我最爱的那首歌最爱的angel 我到什么时候才能遇见我的angel 我最爱的那首歌最爱的angel 我不是王子也会拥有我的angel 🎵 张杰《云中的angel》 在 Java 编程中，字符串处理是一个非常常见的任务。为了便于开发者操作和格式化字符串&…...
Linux: 进程概念详解
1. 冯诺依曼体系结构 截至目前，我们所认识的计算机，都是有一个个的硬件组件组成 。 【注意】： a. 这里的存储器指的是内存 b. 不考虑缓存情况，这里的CPU能且只能对内存进行读写，不能访问外设(输入或输出设备) c.外…...
【C++】模板详细讲解（含反向迭代器）
欢迎来到我的Blog，点击关注哦💕 前言： C的模板在是泛型编程的重要组成部分，编写在不同类型上工作的代码，而无需为每个类型编写重复的代码，这有助于减少代码冗余并提高代码的可维护性。 模板 模板的介绍 …...
haproxy七层代理详解之-完整安装部署流程及负载均衡实现-及热更新方法
一.负载均衡 1.1负载均衡时什么 负载均衡:Load Balance，简称LB，是一种服务或基于硬件设备等实现的高可用反向代理技术，负载均网络流量等)分担给指定的一个或多个后端特定的服务器或设备，从而提高了衡将特定的业务(web服务、公司…...
C++11 bind
bind bind 用来将可调用对象和参数一起进行绑定。可调用对象包括普通函数、全局函 数、静态函数、类静态函数甚至是类成员函数，参数包括普通参数和类成员。绑定后的 结果，可以使用 std::function 进行保存，并延迟调用到我们需要的时候。 绑…...
LeetCode199 二叉树的右视图
前言 题目： 199. 二叉树的右视图 文档： 代码随想录——二叉树的右视图 编程语言： C 解题状态： 成功解决！ 思路 二叉树层序遍历问题的变种，右视图即意味着二叉树每层的最后一个节点。 代码 /*** Definiti…...
数据赋能（172）——开发：数据挖掘——影响因素、直接作用、主要特征
影响因素 主要影响因素如下： 数据类型与属性： 数据类型和对象的不同属性会使用不同的数据类型来描述，如年龄可能是整数类型，而生日则是日期类型。数据挖掘时需要对不同的数据类型进行不同的处理，这直接影响到挖掘算法…...
Vue：Vue3-TypeScript-Pinia-Vite-pnpm / 基础项目 / 20240807
一、项目技术栈 / 依赖 序号技术栈版本解释1node20.14.02vue 3.4.31 3vite 5.3.4 4TypeScript 5.2.2 5 types/node 22.0.2 解决TypeScript项目中缺少对应模块的类型定义文件的问题6 element-plus 2.7.8 ui组建7 types/js-cookie js-cookie 3.0.6 3.0.5 8 sass 1.77.8 9 hu…...
windows Qt 录屏 录音
启动录屏录音： connect(&m_Process, &QProcess::readyReadStandardOutput, [&]() {qDebug() << "Standard output:" << QString::fromLocal8Bit(m_Process.readAllStandardOutput()); });connect(&m_Process, &QProcess…...
AAC中的ADTS格式分析
😎 作者介绍：欢迎来到我的主页👈，我是程序员行者孙，一个热爱分享技术的制能工人。计算机本硕，人工制能研究生。公众号：AI Sun（领取大厂面经等资料），欢迎加我的…...
iOS内存管理---MRC vs ARC
系列文章目录 iOS基础—Block iOS基础—Protocol iOS基础—KVC vs KVO iOS网络—AFNetworking iOS网络—NSURLSession iOS内存管理—MRC vs ARC iOS基础—Category vs Extension iOS基础—多线程：GCD、NSThread、NSOperation iOS基础—常用三方库：Mason…...
【数学分析笔记】第1章第1节：集合（2）
这节我自己补了一些内容，要不然听不太懂陈纪修老师讲的 1. 集合与映射 1.3 子集与真子集 假如有 S \textbf{S} S和 T \textbf{T} T两个集合，其中， S \textbf{S} S的所有元素都属于 T \textbf{T} T，则称 S \textbf{S} S是 T \te…...
大话设计模式：七大设计原则
目录 一、单一职责原则（Single Responsibility Principle, SRP） 二、开放封闭原则（Open-Closed Principle, OCP） 三、依赖倒置原则（Dependency Inversion Principle, DIP） 四、里氏替换原则&am…...