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

css弹性盒子——flex布局

news 2026/2/9 11:53:25

编辑

一、flex容器的样式属性(父元素属性)

display:flex 弹性盒子，实现水平排列,在父盒子设置，适用于单行/单列

justify-content

二、flex元素的样式属性(子元素属性)

1.flex-grow

2.flex-shrink

3.flex-basis

4.flex组合属性 flex:flex-grow flex-shrink flex-basis；

5.order

6.align-self 单独控制某个元素

一、flex容器的样式属性(父元素属性)

display:flex 弹性盒子，实现水平排列,在父盒子设置，适用于单行/单列

默认子盒子宽高度超过父盒子时，按父盒子宽高度均分，再多则会溢出

flex和上面的block，inline，inline-block并列， display只能设置一个属性，display和float不能出现在同一个盒子的属性里。

flex-direction: column;flex-wrap:wrap; 等于 flex-flow: row wrap;

使用F12可快速调试各属性的页面效果

justify-content

justify-content:space-evenly;

justify-content:space-between;

justify-content: space-around;两侧的空间是中间元素间隔空间的一半

stretch(默认值)

align-items:baseline;

二、flex元素的样式属性(子元素属性)

1.flex-grow

单个盒子范围0~1 延伸至剩余空间的0~1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex-grow</title><style>.box{width: 500px;height: 300px;background-color: skyblue;display: flex;}.box div{width: 100px;height: 100px;background-color: pink;flex-grow: 0.6;}</style>
</head>
<body><div class="box"><div>1</div></div>
</body>
</html>

多个子盒子设置超过1时，剩余空间分成n份

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex-grow</title><style>.box{width: 500px;height: 300px;background-color: skyblue;display: flex;}.box div:nth-of-type(1){width: 100px;height: 100px;background-color: pink;flex-grow: 3;}.box div:nth-of-type(2){width: 200px;height: 100px;background-color: green;flex-grow: 2;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div></div>
</body>
</html>

2.flex-shrink

收缩超出部分的0~1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex-grow</title><style>.box{width: 500px;height: 300px;background-color: skyblue;display: flex;}.box div:nth-of-type(1){width: 600px;height: 100px;background-color: pink;flex-shrink: 0.5;}/* .box div:nth-of-type(2){width: 200px;height: 100px;background-color: green;} */</style>
</head>
<body><div class="box"><div>1</div><!-- <div>2</div> --></div>
</body>
</html>

3.flex-basis

设置主轴初始尺寸，0%(不起作用)，n px

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex-grow</title><style>.box{width: 500px;height: 500px;background-color: skyblue;display: flex;}.box div:nth-of-type(1){width: 100px;height: 100px;background-color: pink;/* flex-shrink: 0.5; */flex-basis: 200px;}/* .box div:nth-of-type(2){width: 200px;height: 100px;background-color: green;flex-grow: 0.5;} */</style>
</head>
<body><div class="box"><div>1</div><!-- <div>2</div> --></div>
</body>
</html>

4.flex组合属性 flex:flex-grow flex-shrink flex-basis；

flex:1; 表示1 1 0%

flex:0.5; 表示0.5 1 0%

5.order

顺序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex-grow</title><style>.box{width: 500px;height: 500px;background-color: skyblue;display: flex;/* flex-direction: column; */}.box div{width: 100px;height: 100px;background-color: pink;border: 1px solid black;}.box div:nth-of-type(1){order:1;}.box div:nth-of-type(1){order:-1;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</body>
</html>

6.align-self 单独控制某个元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex-grow</title><style>.box{width: 500px;height: 300px;background-color: skyblue;display: flex;/* flex-direction: column; */}/* .box div:nth-of-type(1){width: 100px;height: 100px;background-color: pink;flex-shrink: 0.5;flex-basis: 200px;flex:1;} *//* .box div:nth-of-type(2){width: 200px;height: 100px;background-color: green;flex-grow: 0.5;} */.box div{width: 100px;height: 100px;background-color: pink;border: 1px solid black;}/* .box div:nth-of-type(1){order:1;} */.box div:nth-of-type(4){align-self: flex-end;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</body>
</html>

css弹性盒子——flex布局

目录编辑一、flex容器的样式属性(父元素属性) display:flex 弹性盒子，实现水平排列,在父盒子设置，适用于单行/单列 justify-content 二、flex元素的样式属性(子元素属性) 1.flex-grow 2.flex-shrink 3.flex-basis 4.flex组合属性 flex:flex-…...

编程日记 2024/9/6 12:43:33

亚马逊云科技 Gen BI 2024-09-04 上海站QuickSight

机缘我又来了，感觉不上班比上班还要忙天天像特种工一天，今天有度过的充实的一天，上午去图书馆，下午去了亚马逊云科技 Gen BI 技术体验日。具体照片可以去这里看哈哈，这个就是我了商业智能的趋势根据艾瑞咨…...

编程日记 2024/9/6 12:42:33

【Qt】Qt和JavaScript使用QWebChannel交互

问题问题一： 问题描述：运行时，Qt向Js端发送消息没有问题，Js端向Qt端发送消息时失败报错：Cannot invoke unknown method of index -1 on object webTransport(0x…) 原因及解决办法：使用Qt 5.11.2编译生…...

编程日记 2024/9/6 12:39:30

码住！15个爆好用知识库软件工具分享

市场趋势：全球知识库管理软件的市场规模发展速度非常快，并且未来几年内仍将继续保持增长。据Verified Market Research预测，2028年知识库管理软件的全球市场份额将增长到588.1亿美元，复合年增长率达12.67%。知识库软件可以帮助企…...

编程日记 2024/9/6 12:38:29

MybatisPlus中@EnumValue注解介绍、应用场景和示例代码

EnumValue注解详细介绍功能概述： EnumValue注解标记在枚举类型的字段上，表示该字段是枚举值在数据库中存储的实际值。这对于枚举的持久化是关键，确保枚举在数据库中的表示与Java枚举类的一致性。主要用途： 字段指定：…...

编程日记 2024/9/6 12:36:27

【计算机网络】描述TCP建立连接与断开的过程

一、TCP连接的建立与断开 1、建立连接——三次握手 1、A的TCP向B发出连接请求报文段其首部中的同步位SYN 1，并选择序号seq x，表明传送数据时的第一个数据字节的序号是 x 2、B的TCP收到连接请求报文段后，如同意，则发回确认。 B …...

编程日记 2024/9/6 12:35:26

CSS学习14[重点]

定位前言一、定位二、定位模式1. 静态定位 static2. 相对定位 relative3. 绝对定位 absolute4. 子绝父相5. 绝对定位的盒子水平居中 6. 固定定位（fixed）7. 叠放次序（z）三、四种定位总结四、定位模式转换前言为什么学习定位&am…...

编程日记 2024/9/6 12:32:23

力扣 | 递归 | 区间上的动态规划 | 486. 预测赢家

文章目录一、递归二、区间动态规划 LeetCode：486. 预测赢家一、递归注意到本题数据范围为 1 < n < 20 1<n<20 1<n<20，因此可以使用递归枚举选择方式，时间复杂度为 2 20 1024 ∗ 1024 1048576 1.05 1 0 6 2^{20…...

编程日记 2024/9/6 12:31:23

黑白格

题目描述小杨有一个 n 行 m 列的网格图，其中每个格子要么是白色，要么是黑色。小杨想知道至少包含 k 个黑色格子的最小子矩形包含了多少个格子。输入格式第一行包含三个正整数 n,m,k，含义如题面所示。之后 n 行，每行⼀个…...

编程日记 2024/9/6 12:29:21

数据链路层（MAC地址）

文章目录数据链路层（MAC地址）1、以太网2、以太网帧格式3、MAC地址4、对比理解 MAC 地址和 IP 地址5、最大传输单元（MTU）6、MTU 对 IP 协议的影响7、MTU 对 UDP 协议的影响8、MTU 对 TCP 协议的影响9、查看硬件地址和 MTU10、ARP …...

编程日记 2024/9/6 12:28:20

【ruby java】登陆功能/邮件发送模版240903

Rails 风格登录系统添加全面而详细的注释，解释每个部分的功能和用途。详细注释，解释了每个文件和代码块的功能。以下是一些关键点的总结： 1. 控制器（Controllers）: - ApplicationController: …...

编程日记 2024/9/6 12:26:17

告别格式不兼容烦恼！ape转换mp3，分享3个简单方法

各位读者们，你们是否有过这种体验：满怀期待地在网上下载一首好听的歌曲，结果怎么点击手机都播放不了，定睛一看，弹窗显示“无法播放该音频文件”。这是为什么呢？原来那首歌的音频格式是ape，不被手…...

编程日记 2024/9/6 12:24:16

Java核心知识体系-并发与多线程：线程基础

1 先导 Java线程基础主要包含如下知识点，相信我们再面试的过程中，经常会遇到类似的提问。 1、线程有哪几种状态? 线程之间如何转变？ 2、线程有哪几种实现方式? 各优缺点？ 3、线程的基本操作（线程管理机制&#xff…...

编程日记 2024/9/6 12:23:15

KRaft模式下的Kafka启动指南：摆脱Zookeeper依赖

一、背景介绍多年来，人们一直在同时使用Apache ZooKeeper和Apache Kafka。但是自Apache Kafka 3.3发布以来，它就可以在没有ZooKeeper的情况下运行。同时它包含了新的命令kafka-metadata-quorum和kafka-metadata-shell?该如何安装新版kafka&#xff0c…...

编程日记 2024/9/6 12:22:13

【数据库】MySQL-基础篇-函数

专栏文章索引：数据库有问题可私聊：QQ：3375119339 目录一、简介二、字符串函数三、数值函数四、日期函数五、流程函数一、简介函数是指一段可以直接被另一段程序调用的程序或代码。也就意味着，这一段程序或代码在 M…...

编程日记 2024/9/6 12:20:12

dp练习【4】

最长数对链 646. 最长数对链给你一个由 n 个数对组成的数对数组 pairs ，其中 pairs[i] [lefti, righti] 且 lefti < righti 。现在，我们定义一种跟随关系，当且仅当 b < c 时，数对 p2 [c, d] 才可以跟在 p1 [a, b…...

编程日记 2024/9/6 12:16:08

php 实现推荐算法

在PHP中实现推荐算法的应用场景通常包括电商、社交媒体、内容平台等。推荐算法可以帮助用户找到与其兴趣相关的内容，提高用户体验和平台黏性。以下是几种常见的推荐算法及其PHP实现方式： 1. 基于协同过滤的推荐算法协同过滤（Collaborative…...

编程日记 2024/9/6 12:15:07

相机光学（三十六）——光圈

0.参考链接 （1）Hall光圈和Piris光圈的区别 （2）自动光圈及P-IRIS原理 1.光圈分类 Hall光圈和Piris光圈是两种不同的光圈技术。它们之间的区别如下： Hall光圈：Hall光圈是一种传统的光电子元件，通…...

编程日记 2024/9/6 12:13:05

数据结构——树和二叉树

目录一、树的概念二、树结点之间的关系三、二叉树 1、满二叉树 2、完全二叉树四、二叉树的存储 1、顺序存储 2、链式存储一、树的概念如果数据和数据之间满足一对多的关系，将其逻辑结构称之为树如下图：树的根与树的分支存在一对多的关系将上…...

编程日记 2024/9/6 12:07:59

142. Go操作Kafka（confluent-kafka-go库）

文章目录 Apache kafka简介开始使用Apache Kafka构建生产者构建消费者总结之前已经有两篇文章介绍过 Go如何操作 kafka 28.windows安装kafka，Go操作kafka示例（sarama库） 51.Go操作kafka示例（kafka-go库） Apache ka…...

编程日记 2024/9/6 12:06:59

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...

编程新知 2026/1/2 23:01:24

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制指定固定的延迟级别通过在Message中设定一个MessageDelayLevel参数，对应18个预设的延迟级别指定时间点的延迟级别通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2026/2/8 21:59:25

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业，其生产设备的运行效率和非计划停机对工业制造效益有较大影响。随着企业自动化和智能化建设的推进，需提前预防假检、错检、漏检，推动智慧生产运维系统数据的流动和现场赋能应用。同时，…...

编程新知 2026/2/5 17:57:20

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

五年级数学知识边界总结思考-下册

目录一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...

编程新知 2025/10/7 4:57:55

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2026/1/9 8:59:09

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2026/1/28 4:50:33