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

css弹性盒子——flex布局

news 2026/2/9 13:32:13

编辑

一、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

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2026/2/1 21:17:19

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风，以**「云启出海，智联未来｜打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办，现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2026/1/30 0:00:28

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...

编程新知 2026/2/4 17:51:19

基础测试工具使用经验

背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...

编程新知 2025/11/22 7:38:58

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui（适配 Vue2 版本 ）实现截图中照片上传预览、删除功能，并封装成可复用组件的完整代码，包含样式和逻辑实现，可直接在 Vue2 项目中使用： 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

3.8 记事本项目总结项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2026/2/1 6:56:36

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/10/6 2:06:51