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

css弹性盒子——flex布局

news 2026/4/9 0:17:50

编辑

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

Docker镜像拉取超时？5分钟搞定国内镜像源加速配置（附最新可用镜像列表）

Docker镜像加速全攻略：2024国内镜像源配置与疑难排解每次在终端输入docker pull后盯着进度条卡住不动，是不是感觉血压都在飙升？作为国内开发者，Docker官方镜像源的访问问题就像一场永远打不完的"拉锯战"。但别急着摔键…...

编程新知 2026/4/8 23:27:41

解决B站视频离线难题：用bilibili-downloader实现4K高清内容永久保存的实战指南

解决B站视频离线难题：用bilibili-downloader实现4K高清内容永久保存的实战指南【免费下载链接】bilibili-downloader B站视频下载，支持下载大会员清晰度4K，持续更新中项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-downloader …...

编程新知 2026/4/8 23:17:36

保姆级教程：在Win10的WSL2里，用Dify 1.9和Ollama 0.12.9搭一个本地的通义千问AI助手

零基础在Windows 10上打造专属AI助手：WSL2DifyOllama实战指南你是否想过在自己的电脑上运行一个完全本地的AI助手？不需要昂贵的云端算力，不依赖网络连接，所有数据都在本地处理。今天我们就用Windows 10自带的WSL2功能&#xff0c…...

编程新知 2026/4/8 22:36:28

使用 Python 将 Excel 数据批量导入到数据库中（SQLite）

一、应用场景与方案优势适用场景企业 Excel 报表数据迁移至数据库持久化存储；自动化办公：定期将 Excel 导出数据同步到数据库；轻量级数据中台：多 Excel 文件整合入库，方便后续查询分析；4.测试数据构造&…...

编程新知 2026/4/8 22:20:04

低代码不是妥协，而是进化：.NET 9 AOT+Hot Reload双模引擎深度解析，上线周期压缩至72小时以内

第一章：低代码不是妥协，而是进化：.NET 9 AOTHot Reload双模引擎深度解析，上线周期压缩至72小时以内在传统认知中，“低代码”常被误读为牺牲可控性与性能的权宜之计。而.NET 9通过原生AOT编译与Hot Reload能力的深度融合…...

编程新知 2026/4/8 21:51:35

告别虚拟机！在Windows 11上零配置搭建Masm汇编实验环境（附保姆级图文教程）

在Windows 11上零配置搭建Masm汇编实验环境的完整指南对于计算机专业的学生和汇编语言初学者来说，搭建一个可用的实验环境往往是第一道门槛。传统方法要么需要配置复杂的虚拟机，要么依赖过时的DOS模拟器，这些方案不仅占用系统资源&#xff0…...

编程新知 2026/4/8 21:41:26

C# 13主构造函数性能真相：实测对比传统构造器，GC第0代回收次数激增217%？答案藏在这3行IL指令里

第一章：C# 13主构造函数性能真相的终极叩问C# 13 引入的主构造函数（Primary Constructors）并非语法糖的简单叠加，其背后涉及编译器对类型初始化路径的深度重构。当使用 class Person(string name, int age) 声明时，编译…...

编程新知 2026/4/8 20:24:45

移动系统设计终极指南：从需求分析到架构实现的5个关键步骤

移动系统设计终极指南：从需求分析到架构实现的5个关键步骤【免费下载链接】mobile-system-design A simple framework for mobile system design interviews 项目地址: https://gitcode.com/gh_mirrors/mo/mobile-system-design GitHub 加速计划 / mo / mob…...

编程新知 2026/4/8 19:43:44