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

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

news 2025/12/26 13:13:04

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/12/14 17:38:17

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/12/24 2:50:30

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/12/22 14:52:54

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/11/9 2:57:17

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2025/12/17 14:33:52

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

FFmpeg：Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

编程新知 2025/12/19 23:09:17

nnUNet V2修改网络——暴力替换网络为UNet++

更换前，要用nnUNet V2跑通所用数据集，证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构，初步了解要修改的网络，知己知彼，修改起来才能游刃有余。 U-Net存在两个局限，一是网络的最佳深度因应用场景而异，这取决于任务的难度和可用于训练的标注数…...

编程新知 2025/12/24 23:55:04

Leetcode33（ 搜索旋转排序数组）

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

编程新知 2025/11/29 0:44:34

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

编程新知 2025/12/24 14:19:34