css弹性盒子——flex布局
目录
编辑
一、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-…...
亚马逊云科技 Gen BI 2024-09-04 上海站QuickSight
机缘 我又来了,感觉不上班比上班还要忙 天天像特种工一天,今天有度过的充实的一天,上午去图书馆,下午去了 亚马逊云科技 Gen BI 技术体验日 。 具体照片可以去 这里看 哈哈,这个就是我了 商业智能的趋势 根据艾瑞咨…...
【Qt】Qt和JavaScript使用QWebChannel交互
问题 问题一: 问题描述:运行时,Qt向Js端发送消息没有问题,Js端向Qt端发送消息时失败 报错:Cannot invoke unknown method of index -1 on object webTransport(0x…) 原因及解决办法:使用Qt 5.11.2编译生…...
码住!15个爆好用知识库软件工具分享
市场趋势:全球知识库管理软件的市场规模发展速度非常快,并且未来几年内仍将继续保持增长。据Verified Market Research预测,2028年知识库管理软件的全球市场份额将增长到588.1亿美元,复合年增长率达12.67%。 知识库软件可以帮助企…...
MybatisPlus中@EnumValue注解介绍、应用场景和示例代码
EnumValue注解详细介绍 功能概述: EnumValue注解标记在枚举类型的字段上,表示该字段是枚举值在数据库中存储的实际值。这对于枚举的持久化是关键,确保枚举在数据库中的表示与Java枚举类的一致性。 主要用途: 字段指定:…...
【计算机网络】描述TCP建立连接与断开的过程
一、TCP连接的建立与断开 1、建立连接——三次握手 1、A的TCP向B发出连接请求报文段 其首部中的同步位SYN 1,并选择序号seq x,表明传送数据时的第一个数据字节的序号是 x 2、B的TCP收到连接请求报文段后,如同意,则发回确认。 B …...
CSS学习14[重点]
定位 前言一、定位二、定位模式1. 静态定位 static2. 相对定位 relative3. 绝对定位 absolute4. 子绝父相5. 绝对定位的盒子水平居中 6. 固定定位(fixed)7. 叠放次序(z)三、四种定位总结四、定位模式转换 前言 为什么学习定位&am…...
力扣 | 递归 | 区间上的动态规划 | 486. 预测赢家
文章目录 一、递归二、区间动态规划 LeetCode:486. 预测赢家 一、递归 注意到本题数据范围为 1 < n < 20 1<n<20 1<n<20,因此可以使用递归枚举选择方式,时间复杂度为 2 20 1024 ∗ 1024 1048576 1.05 1 0 6 2^{20…...
黑白格
题目描述 小杨有一个 n 行 m 列的网格图,其中每个格子要么是白色,要么是黑色。 小杨想知道至少包含 k 个黑色格子的最小子矩形包含了多少个格子。 输入格式 第一行包含三个正整数 n,m,k,含义如题面所示。 之后 n 行,每行⼀个…...
数据链路层(MAC地址)
文章目录 数据链路层(MAC地址)1、以太网2、以太网帧格式3、MAC地址4、对比理解 MAC 地址和 IP 地址5、最大传输单元(MTU)6、MTU 对 IP 协议的影响7、MTU 对 UDP 协议的影响8、MTU 对 TCP 协议的影响9、查看硬件地址和 MTU10、ARP …...
【ruby java】登陆功能/邮件发送模版240903
Rails 风格登录系统添加全面而详细的注释,解释每个部分的功能和用途。 详细注释,解释了每个文件和代码块的功能。以下是一些关键点的总结: 1. 控制器(Controllers): - ApplicationController: …...
告别格式不兼容烦恼!ape转换mp3,分享3个简单方法
各位读者们,你们是否有过这种体验:满怀期待地在网上下载一首好听的歌曲,结果怎么点击手机都播放不了,定睛一看,弹窗显示“无法播放该音频文件”。这是为什么呢?原来那首歌的音频格式是ape,不被手…...
Java核心知识体系-并发与多线程:线程基础
1 先导 Java线程基础主要包含如下知识点,相信我们再面试的过程中,经常会遇到类似的提问。 1、线程有哪几种状态? 线程之间如何转变? 2、线程有哪几种实现方式? 各优缺点? 3、线程的基本操作(线程管理机制ÿ…...
KRaft模式下的Kafka启动指南:摆脱Zookeeper依赖
一、背景介绍 多年来,人们一直在同时使用Apache ZooKeeper和Apache Kafka。但是自Apache Kafka 3.3发布以来,它就可以在没有ZooKeeper的情况下运行。同时它包含了新的命令kafka-metadata-quorum和kafka-metadata-shell?该如何安装新版kafka,…...
【数据库】MySQL-基础篇-函数
专栏文章索引:数据库 有问题可私聊:QQ:3375119339 目录 一、简介 二、字符串函数 三、数值函数 四、日期函数 五、流程函数 一、简介 函数 是指一段可以直接被另一段程序调用的程序或代码。 也就意味着,这一段程序或代码在 M…...
dp练习【4】
最长数对链 646. 最长数对链 给你一个由 n 个数对组成的数对数组 pairs ,其中 pairs[i] [lefti, righti] 且 lefti < righti 。 现在,我们定义一种 跟随 关系,当且仅当 b < c 时,数对 p2 [c, d] 才可以跟在 p1 [a, b…...
php 实现推荐算法
在PHP中实现推荐算法的应用场景通常包括电商、社交媒体、内容平台等。推荐算法可以帮助用户找到与其兴趣相关的内容,提高用户体验和平台黏性。以下是几种常见的推荐算法及其PHP实现方式: 1. 基于协同过滤的推荐算法 协同过滤(Collaborative…...
相机光学(三十六)——光圈
0.参考链接 (1)Hall光圈和Piris光圈的区别 (2)自动光圈及P-IRIS原理 1.光圈分类 Hall光圈和Piris光圈是两种不同的光圈技术。它们之间的区别如下: Hall光圈:Hall光圈是一种传统的光电子元件,通…...
数据结构——树和二叉树
目录 一、树的概念 二、树结点之间的关系 三、二叉树 1、满二叉树 2、完全二叉树 四、二叉树的存储 1、顺序存储 2、链式存储 一、树的概念 如果数据和数据之间满足一对多的关系,将其逻辑结构称之为树 如下图:树的根与树的分支存在一对多的关系 将上…...
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…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议(EPSFD 2025)将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会,EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
P3 QT项目----记事本(3.8)
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…...
NPOI Excel用OLE对象的形式插入文件附件以及插入图片
static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...
MinIO Docker 部署:仅开放一个端口
MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...
Web后端基础(基础知识)
BS架构:Browser/Server,浏览器/服务器架构模式。客户端只需要浏览器,应用程序的逻辑和数据都存储在服务端。 优点:维护方便缺点:体验一般 CS架构:Client/Server,客户端/服务器架构模式。需要单独…...
stm32wle5 lpuart DMA数据不接收
配置波特率9600时,需要使用外部低速晶振...

