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

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

news 2026/6/2 3:20:48

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

本地柴油发电机组排行2023年最新榜单

柴油发电机是通过燃烧柴油驱动发动机&#xff0c;进而发电的设备&#xff0c;广泛应用于电力中断或无电网地区。1. 柴油发电机的核心工作原理是什么&#xff1f;柴油发电机是一种将化学能转化为电能的设备&#xff0c;其核心是柴油发动机与交流发电机的组合。当柴油在发动机内燃…...

编程新知 2026/5/26 3:05:52

Lampiao 靶场

Lampiao 靶场完整渗透解析一、靶场环境信息攻击机&#xff08;Kali&#xff09;IP&#xff1a;192.168.146.128靶机 IP&#xff1a;192.168.146.129目标&#xff1a;获取靶机 root 权限与 flag二、步骤 1&#xff1a;信息收集&#xff08;端口与服务扫描&#xff09;nmap -p- -…...

编程新知 2026/5/26 2:47:45

从多路复用到三维光阵：Arduino驱动8x8x8 LED立方体全解析

1. 项目概述&#xff1a;用Arduino点亮一个三维世界几年前&#xff0c;我第一次在创客展上看到一个8x8x8的LED立方体&#xff0c;那种由数百个光点构成的、在三维空间中流动的动画效果&#xff0c;瞬间就把我吸引住了。它不像普通的平面LED屏&#xff0c;而是真正有“深度”的光…...

编程新知 2026/5/27 11:26:13

1901-2022年中国气温变化分析实战：用这份1km栅格数据我们能发现什么？

1901-2022年中国气温变化分析实战&#xff1a;如何从1km栅格数据中挖掘气候演变规律当一份覆盖122年、分辨率精确到1公里的气温栅格数据摆在面前时&#xff0c;我们看到的不仅是数字矩阵&#xff0c;更是一部写在经纬度坐标里的气候变迁史诗。这份由逐月数据聚合生成的逐年气温…...

编程新知 2026/5/25 23:45:44

别再手动编译了！Matlab一键调用CEC2017测试函数的完整配置指南（附30个函数调用示例）

别再手动编译了&#xff01;Matlab一键调用CEC2017测试函数的完整配置指南&#xff08;附30个函数调用示例&#xff09; 算法研究者们常常需要借助标准测试函数来验证优化算法的性能&#xff0c;而CEC2017测试函数集因其复杂性和多维度的挑战性&#xff0c;成为评估算法鲁棒性的…...

编程新知 2026/5/25 22:42:37

2026 文章代码高亮方案选型

将基于 Prism.js 或 Highlight.js 的传统高亮方案与基于 Shiki 的现代化高亮方案进行对比&#xff0c;其核心区别在于底层解析原理的不同&#xff08;正则表达式 vs. TextMate 语法树&#xff09;。 以下是两种方案的底层原理、各自优缺点、核心对比矩阵以及适用场景的详细分析…...

编程新知 2026/5/25 22:40:37

ZTE光猫工厂模式解锁：5分钟开启隐藏功能的终极指南

ZTE光猫工厂模式解锁&#xff1a;5分钟开启隐藏功能的终极指南 【免费下载链接】zteOnu A tool that can open ZTE onu device factory mode 项目地址: https://gitcode.com/gh_mirrors/zt/zteOnu 核心关键词&#xff1a;ZTE光猫工厂模式解锁 长尾关键词&#xff1a; ZT…...

编程新知 2026/5/25 21:39:56

独立开发者如何利用Taotoken Token Plan，以更低成本启动AI项目

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 独立开发者如何利用Taotoken Token Plan&#xff0c;以更低成本启动AI项目 对于独立开发者或小型团队而言&#xff0c;启动一个集成…...

编程新知 2026/5/25 21:21:36

基于GSM与Arduino的远程控制系统：DIY电话控制与短信报警方案

1. 项目概述与核心价值如果你曾经想过&#xff0c;在离家几十公里外&#xff0c;仅凭一部普通的手机&#xff0c;就能远程打开家里的车库门、查看门窗是否关好&#xff0c;甚至在异常情况发生时让系统自动打电话给你报警&#xff0c;那么这个基于GSM的远程控制系统项目&#xf…...

编程新知 2026/5/25 20:59:15

sd卡分区了数据还能恢复吗，只需3种方法和视频教学，数据就能神奇地回来！

断开读写通信&#xff01;锁死底层端口&#xff01;你的sd卡在经历重新分区的一瞬间&#xff0c;其物理层面的扇区正在承受最严酷的逻辑改写。这并非介质烧毁&#xff0c;而是系统内核强行切断了旧有簇链的映射关系&#xff0c;将其标定为休克态。此时若任由操作系统自动加载缩…...

编程新知 2026/5/25 14:54:30