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的模板在是泛型编程的重要组成部分，编写在不同类型上工作的代码，而无需为每个类型编写重复的代码，这有助于减少代码冗余并提高代码的可维护性。 模板 模板的介绍 …...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》
引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中，从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备（如专用硬件设备），从而消除了直接物理连接的需要。USB over IP的…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会，玩音乐的本质就是玩电网。火电声音偏暖，水电偏冷，风电偏空旷。至于太阳能发的电，则略显朦胧和单薄。 不知你是否有感觉，近两年家里的音响声音越来越冷，听起来越来越单薄？ —…...
return this；返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请，不同级别的经理有不同的审批权限： // 抽象处理者：审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
uniapp手机号一键登录保姆级教程（包含前端和后端）
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号（第三种）后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...
Axure 下拉框联动
实现选省、选完省之后选对应省份下的市区...