flex--伸缩性

1.flex-basis

flex-basis 设置的是主轴方向的基准长度,会让宽度或高度失效。

备注:主轴横向:宽度失效;主轴纵向:高度失效

作用:浏览器根据这个属性设置的值,计算主轴上是否有多余空间,默认值auto ,即:伸缩项目
的宽或高。如果该项目未指定长度,则长度将根据内容决定。

.outer {width: 300px;height: 200px;background-color: #888;/* 将该元素变为了伸缩容器(开启了flex布局) */display: flex;flex-wrap: wrap;align-content: flex-start;}.inner {width: 50px;height: 50px;background-color: yellow;border: 1px solid black;box-sizing: border-box;}
<div class="outer"><div class="inner">1</div><div class="inner inner2">2</div><div class="inner inner3">3</div><div class="inner">4</div><div class="inner">5</div></div>

设置了flex-basis:80px;沿主轴方向的宽(主轴方向:row 或row-reverse)或主轴方向的高(主轴方向:column 或 column-reverse) 会变成80px,原先设置的宽或高无效


2. flex-grow(伸)

默认flex-grow:0;即使主轴有富余的空间也不拉伸.写在要拉伸的元素上

规则:
1. 若所有伸缩项目的 flex-grow 值都为1 (或所有伸缩项目的grow值一样),则:它们将等分剩余空间(如果有空间的话)。
2. 若三个伸缩项目的flex-grow 值分别为: 1 、2 、3 ,则:分别瓜分到: 1/6 、2/6 、
3/6 的空间。


flex-grow:0;


.inner{

flex:1

}

拉伸标志


1-4 flex-grow:0

5:flex-grow:1;  剩下的空间都给5


获取剩余空间计算公式

总的份数 = inner1的flexGrow +  inner2的flexGrow +  inner3的flexGrow

inner1的获得的剩余空间:(inner1的flexGrow/ 总份数) * 剩余的空间

======================================================

块1:flex-grow:0;

块2:flex-grow:1;

块3:flex-grow:2;

剩余空间:400-50*3=250

总份数:0+1+2 = 3

块1 伸展: 0/3 *250 = 0;   最后W: 50 +0 = 50px

块2 伸展: 1/3 *250 =83.33;   最后W: 50 +83.33 =133.3px

块1 伸展: 2/3 *250 = 166.66;   最后W: 50 +166.66 =216.66px


flex-shrink

 

概念: flex-shrink 定义了项目的压缩比例,默认为1 ,即:如果空间不足,该项目将会缩小。

 .outer {width: 400px;height: 200px;background-color: #888;display: flex;} 
.inner1{width:100px;flex-shrink: 0;}.inner2{width:200px;flex-shrink: 1;}.inner3{width:300px;flex-shrink: 2;}

父容器 宽度:400px

所有子元素 宽度:100+200+300 = 600

所有子元素超出父容器 600-400 = 200 px;  对各个子元素进行压缩

计算总份数:块1 的 宽度 * 块1 的shrink值 + 块2 的 宽度 * 块2 的shrink值+块3 的 宽度 * 块3 的shrink值,如块3为:(300*2 /800)

即 总份数   100*0 + 200*1 + 300*2 = 800

缺少:200

块1 缩小 :(100*0 /800)* 200 = 0  变成  100-0 = 100

块2 缩小 :(200*1 /800)* 200 = 50   变成  200-50 = 150

块3 缩小: (300*2 /800)* 200 = 150  变成  300-150 = 150

设置了border,虽然设置了 box-sizing: border-box;但是浏览器会出现计算错误。把border去掉,算出来的结果就正确了。


flex 符合属性

flex 是复合属性,复合了: flex-grow 、 flex-shrink 、flex-basis 三个属性,默认值为 0 1
auto 。


如果写 flex:1 1 auto ,则可简写为: flex:auto
如果写 flex:1 1 0 ,则可简写为: flex:1
如果写 flex:0 0 auto ,则可简写为: flex:none
如果写 flex:0 1 auto ,则可简写为: flex:0 auto —— 即 flex 初始值。

伸展


如果写 flex:1 1 0 ,则可简写为: flex:1


如果写 flex:0 0 auto ,则可简写为: flex:none


如果写 flex:0 1 auto ,则可简写为: flex:0 auto


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/580115.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言操作符详情

C语言操作符详情 是否控制求值顺序中 只有“&&”“&#xff1f;&#xff01;”“&#xff0c;”“||”为“是” 其余均为“否”

python相关问题及解决方法

1.解决pymysql查不到最新数据的办法 执行时&#xff0c;事务隔离&#xff0c;导致不是最新的。每次操作后增加commit() 2.判断变量的数据类型 isinstance(expectation,str) # 判断变量类型 isinstance(expectation, int) isinstance(expectation,str) isinstance(expectatio…

C#学习笔记 - C#基础知识 - C#从入门到放弃 - C# 处理程序异常相关技术

C# 入门基础知识 - C# 处理程序异常相关技术 第11节 处理程序异常相关技术11.1 捕获异常11.2 清除、处理所有异常11.3 引发异常11.4 预定义异常类11.5 自定义异常类 更多C#基础知识点可查看&#xff1a;C#学习笔记 - C#基础知识 - C#从入门到放弃 第11节 处理程序异常相关技术…

模拟EXCEL排序

7-78 模拟EXCEL排序 分数 25 全屏浏览题目 作者 陈越 单位 浙江大学 Excel可以对一组纪录按任意指定列排序。现请编写程序实现类似功能。 输入格式: 输入的第一行包含两个正整数N(≤105) 和C&#xff0c;其中N是纪录的条数&#xff0c;C是指定排序的列号。之后有 N行&am…

Debezium发布历史30

原文地址&#xff1a; https://debezium.io/blog/2018/03/08/creating-ddd-aggregates-with-debezium-and-kafka-streams/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. 使用 Debezium 和 Kafka Streams 创建 …

Redis Streams在Spring Boot中的应用:构建可靠的消息队列解决方案【redis实战 二】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Redis Streams在Spring Boot中的应用&#xff1a;构建可靠的消息队列解决方案 引言前言Redis Streams的基本概念和特性1. 日志数据结构2. 消息和字段3. 消费者组4. 消息ID5. 实时和历史数据处理6. 性能…

7.3 uvm_config_db in UVM

uvm_config_db类派生自uvm_resource_db类。它是uvm_resource_db顶部的另一层便利层&#xff0c;简化了用于uvm_component实例的基本接口&#xff08;资源库的访问方法&#xff09;。 下面uvm_config_db类的代码段取自uvm源代码。 class uvm_config_db#(type Tint) extends uv…

html之为什么使用表单,常用表单元素使用?

文章目录 一、为什么使用表单呢&#xff1f;二、常用表单元素使用三、总结 一、为什么使用表单呢&#xff1f; 为什么使用表单呢&#xff0c;使用表单是为了更好的收集用户数据&#xff0c;并且安全 二、常用表单元素使用 1、password密码框 密码框&#xff1a;会隐藏数据&a…

网络摄像头爆破实战

*** 重要说明&#xff1a;仅用于交流网络安全测试技术&#xff0c;并唤起大家对网络安全的重视&#xff0c;如用本文的技术干违法的事情&#xff0c;博主概不负责。*** 文章目录 前言1. 发现摄像头2. 发现端口3. 确定品牌信息4. 确定RTSP地址5. 获取视频流6. 获取密码7. 再次获…

flutter学习-day20-使用SafeArea组件处理各机型的安全距离

&#x1f4da; 目录 介绍分析示例和效果图特殊情况 1. 介绍 安全区域&#xff0c;指的是移动端设备的可视窗口范围。处于安全区域的内容不受圆角、刘海屏、iPhone 小黑条、状态栏等的影响&#xff0c;也就是说&#xff0c;我们要做好适配&#xff0c;必须保证页面可视、可操作…

【资源】stable diffusion常用checkpoint

翻墙下载实在太慢了&#xff0c;还不稳定&#xff0c;就把常用的一些checkpoint传网盘了&#xff0c;需要自取~ clip-vit-large-patch14 脸书&#xff1a;openai/clip-vit-large-patch14 Hugging Face 链接&#xff1a;https://pan.baidu.com/s/1dg3XQmcYMoHtNKLqlrBVzQ?p…

亚马逊鲲鹏系统全自动化操作注册下单更快捷

亚马逊鲲鹏系统的强大崛起&#xff0c;让买家号的注册、养号、下单留评等繁琐任务迎来了一场全新的自动化革命。这一创新性软件系统的横空出世&#xff0c;为广大亚马逊卖家提供了一种高效、智能的解决方案&#xff0c;成功摆脱了繁重的手动操作。 在这一系统中&#xff0c;买家…

安卓恢复指南:五种安卓数据恢复软件推荐

我们的手机随身携带。我们抓住他们快速拍照、发送消息并保持娱乐。有时我们对它们过于冒险&#xff0c;将它们扔在混凝土或水中&#xff0c;安装我们不应该安装的软件&#xff0c;然后将它们留在电影中或公园的长椅上。 如果您要在任何地方丢失重要数据&#xff0c;很可能是在…

【Qt-数据库】

Qt编程指南 ■ SQLite■ CSV■ JSON ■ SQLite Qt 提供了很多操作数据库的类&#xff0c; SQLite 是非常小的&#xff0c;是轻量级的&#xff0c;完全配置时小于 400KiB&#xff0c;省略可选功能配置时小于 250KiB。 SQLite 是一个进程内的库&#xff0c;实现了自给自足的、无…

Cesium问题汇总

引入图片报错&#xff0c;Error loading image for billboard: [object Event] 解决方法&#xff1a;可以import或require引入一下再应用

C# WPF上位机开发(扩展上位机之外的技能)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 如果把c# wpf只是看成是一个做界面的框架&#xff0c;那确实有点狭隘了。单独的上位机软件&#xff0c;如果不需要上下游的支持&#xff0c;没有与…

hive中struct相关函数总结

目录 hive官方函数解释示例实战 hive官方函数解释 hive官网函数大全地址&#xff1a;添加链接描述 Return TypeNameDescriptionstructstruct(val1, val2, val3, …)Creates a struct with the given field values. Struct field names will be col1, col2, …structnamed_str…

linux中top参数详解

top命令是Linux下常用的性能分析工具&#xff0c;能够实时显示系统中各个进程的资源占用状况&#xff0c;类似于Windows的任务管理器 top参数详解 第一行&#xff0c;任务队列信息&#xff0c;同 uptime 命令的执行结果 系统时间&#xff1a;07:27:05 运行时间&#xff1a;up …

Oracle查询重复数据取第二行,好用来删除重复数据

Oracle查询重复数据取第二行&#xff0c;好用来删除重复数据 SELECT * FROM ( SELECT e.* , ROW_NUMBER() over(PARTITION BY product_category_id,model_size_id ORDER BY product_category_id,model_size_id) rn FROM equ_check_rules e ) s WHERE rn 2;

微信小程序的bindtap和catchtap的区别

一. 事件 1.事件是视图层到逻辑层的通讯方式。 2. 事件可以将用户的行为反馈到逻辑层进行处理。 3. 事件可以绑定在组件上&#xff0c;当达到触发事件&#xff0c;就会执行逻辑层中对应的事件处理函数。 二. 如何使用事件 1. 简单来说就是将事件绑定到组件上面&#xff0c;bi…