flex-grow,flex-shrink 缩放比例详解

2023-12-07 17:36

本文主要是介绍flex-grow,flex-shrink 缩放比例详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果设定了flex-grow,当容器有剩余空间时,凡是flex-grow大于0的项目将一起瓜分剩余空间,每个项目所分到的剩余空间,跟项目自身的大小无关,只跟各项目设定的flex-grow和剩余空间有关。

如下例子,parent宽度 大于 son1+son2设定的宽度,计算son1放大后的宽度:

son1最终渲染宽度 = son1设定宽度 + 应放大宽度

(1)先获取剩余空间: parent宽度 - (son1设定宽度 + son2设定宽度)

300 - (120 + 140) = 40px

(2)应放大宽度 = 剩余空间 * 占比
        占比 = son1的flex-grow / (son1的flex-grow + son2的 flex-grow)

son1应放大宽度 = 40*1.5/(1+1.5)  = 24

son1最终渲染宽度 = 120px + 40*1.5/(1+1.5) = 144px

<div class="parent"><div class="son son1">1</div><div class="son son2">2</div>
</div>.parent {display: flex;width: 300px;height: 300px;background: #fff;border: 1px solid #999;.son {&.son1 {background: blue;flex-basis: 120px;flex-grow: 1.5;}&.son2 {background: #f9ff33;flex-basis: 140px;flex-grow: 1;}}
}

二、flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。不同于flex-grow,如果设定了flex-shrink,当容器空间不足时, 每个项目收缩的空间,不仅跟项目设定的flex-shrink和总的收缩空间有关,还跟项目自身的大小有关。

  • 容器剩余宽度:200 - (100+120+130) = -150
  • 缩小因子的分母:1*100 + 2*120 + 3*130 = 730 (*前面的数字为各项目的flex-shrink值)
  • son1的缩小因子:1*100/730
  • son1的缩小宽度为缩小因子乘于容器剩余宽度:1*100/730 * (-150)
  • son1最后则缩小为:100px + (1*100/730 * (-150)) = 79.45px

加入弹性元素本身大小作为计算方法的考虑因素,主要是为了避免将一些本身宽度较小的元素在收缩之后宽度变为0的情况出现。

<div class="parent"><div class="son son1">1</div><div class="son son2">2</div><div class="son son3">3</div>
</div>.parent {display: flex;width: 200px;height: 300px;background: #fff;.son {&.son1 {background: blue;flex-basis: 100px;flex-shrink: 1;}&.son2 {background: yellow;flex-basis: 120px;flex-shrink: 2;}&.son3 {background: red;flex-basis: 130px;flex-shrink: 3;}}
}

这篇关于flex-grow,flex-shrink 缩放比例详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/466734

相关文章

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

Linux系统性能检测命令详解

《Linux系统性能检测命令详解》本文介绍了Linux系统常用的监控命令(如top、vmstat、iostat、htop等)及其参数功能,涵盖进程状态、内存使用、磁盘I/O、系统负载等多维度资源监控,... 目录toppsuptimevmstatIOStatiotopslabtophtopdstatnmon

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

Android ClassLoader加载机制详解

《AndroidClassLoader加载机制详解》Android的ClassLoader负责加载.dex文件,基于双亲委派模型,支持热修复和插件化,需注意类冲突、内存泄漏和兼容性问题,本文给大家介... 目录一、ClassLoader概述1.1 类加载的基本概念1.2 android与Java Class

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

C#读写文本文件的多种方式详解

《C#读写文本文件的多种方式详解》这篇文章主要为大家详细介绍了C#中各种常用的文件读写方式,包括文本文件,二进制文件、CSV文件、JSON文件等,有需要的小伙伴可以参考一下... 目录一、文本文件读写1. 使用 File 类的静态方法2. 使用 StreamReader 和 StreamWriter二、二进

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v