Flex中宽度计算

flex 有三个属性值,分别是 flex-grow, flex-shrink, flex-basis,默认值是 0 1 auto。 发现网上详细介绍他们的文章比较少, 今天就详细说说他们,先一个一个看。

flex-grow

定义项目的放大比例,默认值为0,就算存在剩余空间,也不会放大。单单几句话肯定不能表达出意思,来看个DEMO。

flex-grow

flex-grow的默认值为0,如果没有定义该属性,是不会拥有分配剩余空间的权利的。A, B, C, D, E 的宽度分别是 100, 120, 130, 100, 100,父级的宽度是660,父级宽减去子级的全部宽度,这样剩余空间就是110。例子中B, C定义了flex-grow,分别是1,2,那剩余空间分成3份,B1份,C2份,比例就是1:2,分配计算出来的值就是B :36.666666666666664, C:73.33333333333333。这个时候剩余空间就被计算出来了,相加后的结果就是B:156.66666666666666,C:203.33333333333331

B的计算公式:120 + (110 / 3) * 1

C的计算公式: 130 + (110 / 3) * 2

flex-shrink

定义项目的缩小比例,默认值为1,注意前提是空间不足的情况下,看例子。

flex-shrink

这里 A, B, C 的宽度分别是155, 200, 50,(注意这里的宽度我是用flex-basis代替的,在这个例子中和width的作用是一样的)。 父级宽度是300,计算超出的空间就是 -105,这样超出的 105px 就要被 A, B, C 消化掉,比例是2:1:1

如何消化 ? 首先是每个项目的wdith值乘以flex-shrink值求积,

A:(155 * 2) = 310
B:(200 * 1) = 200
C:(50 * 1) = 50

然后再求和所有项目的乘积。

(310 + 200 + 50) = 560

得到求占比之后还要乘以要腾出的空间。

A:(310 / 560) * 105 = 58.125
B:(200 / 560) * 105 = 37.5
C:(50 / 560) * 105 = 9.375

得到每一项要腾出的空间後然後

A:(155 - 58.125) = 96.875
B:(200 - 37.5) = 162.5
C:(50 - 9.375) = 40.625

好了,这样就得出计算后的宽度了。

flex-basis

width一样,他的默认值为auto,把上面几个例子换成width也是一样的。当然工作中最好用flex-basis,更符合规范。

总结

如果父级的空间足够:flex-grow有效,flex-shrink无效。

如果父级的空间不够:flex-shrink 有效,flex-grow无效。

注意,设为Flex布局以后,子元素的floatclearvertical-align属性将失效。

转载于:https://www.cnblogs.com/dehuachenyunfei/p/6527601.html

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

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

相关文章

Lucene详解

一.lucene原理 Lucene 是apache软件基金会一个开放源代码的全文检索引擎工具包,是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎,部分文本分析引擎。它不是一个完整的搜索应用程序,而是为你的应用程序提供索引和搜索功能…

.NET 6.0中使用Identity框架实现JWT身份认证与授权

原文作者:Sarathlal Saseendran原文链接:https://www.c-sharpcorner.com/article/jwt-authentication-and-authorization-in-net-6-0-with-identity-framework/翻译:沙漠尽头的狼(谷歌翻译加持)介绍微软于 2021 年 11 …

adb devices 里面有很多 emulator-XXXX的解决方法

2019独角兽企业重金招聘Python工程师标准>>> adb kill-server 转载于:https://my.oschina.net/sfshine/blog/700354

MQ(Message Queue)简介

一、何为MQ? MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法。应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们。消息传递指的是程序之间通…

【GlobalMapper精品教程】015:矢量面图层的创建及数字化操作

本文讲解在Globalmapper中文23.0中创建矢量面状数据(政区数据),并进行面状数据采集及编辑的详细操作流程,数据为配套案例数据包中的data015.rar。 参考阅读: ArcGIS实验教程——实验三:矢量数据采集与编辑(矢量化) 文章目录 一、认识工具条1. 数字化(创建)工具条2. 选…

Blazor University (39)JavaScript 互操作 —— 更新 document title

原文链接:https://blazor-university.com/javascript-interop/calling-javascript-from-dotnet/updating-the-document-title/更新 document title源代码[1]在创建 Blazor 布局[2]部分中,我们看到了 Blazor 应用程序如何存在于 HTML(或 cshtm…

IIS 日志文件位置

IIS 6 Log files location IIS 6中日志文件的位置%windir%\System32\LogFilesIIS 7 Log files location IIS的日志文件的位置%SystemDrive%\inetpub\logs\LogFiles用户每打开一次网页,iis 都会记录用户IP、访问的网页地址、访问时间、访问状态等信息,这些…

APP测试流程和测试点

1 APP测试基本流程 1.1流程图 1.2测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为两三周(即15个工作日),根据项目情况以及版本质量可适当缩短或延长测试时间。正式测试前先向主管确认项目排期。 1.3测试资源 测…

39所强基计划试点高校已全部公布招生简章

截至目前(4月8日下午) 39所强基计划试点高校 已全部公布招生简章 各高校招生要求是什么? 招生专业有哪些? 什么时候报名? 一起来看 北京大学 招生对象及报名条件 各省(区、市)符合2022年全国普通高等学校招生统…

【ArcGIS错误异常100问】之001:License服务无法启动权威解决办法

测试环境: 操作系统:Windows10ArcGIS版本:10.X结果:通过测试 文章目录1. 错误提示2. 问题分析3. 解决办法3.1 关闭Windows Defender3.2 关闭系统防火墙3.3 删除迈克菲(McAfee)杀毒软件3.4 在系统服务中启动…

Appium wait等待的三种方法

1、sleep()方法Thread.sleep(60000)强制等待60s2、隐式等待implicitlyWait()driver.manage().timeouts().implicitlyWait(30,TimeUnit.SECONDS);全局等待30s不管元素是否已经加载1) 当使用了隐式等待执行测试的时候,如果WebDriver没有在DOM中…

ASP.NET Core 技术内幕与项目实战读后感

前几天拿到了杨中科老师的新书《ASP.NET Core 技术内幕与项目实战》,迫不及待的“两”口气读完了。用一句话来总结,这是一本写给.NET开发者的非常实用的接地气的好书,感觉有必要自发为这本书宣传一波。杨老师在 .NET 开发者社区中的知名度非常…

avalon2学习教程15指令总结

avalon的指令在上一节已经全部介绍完毕,当然有的语焉不详,如ms-js。本节主要总结我对这方面的思考与探索。 MVVM的成功很大一语分是来自于其指令,或叫绑定。让操作视图的功能交由形形式式的指令来代劳。VM,成了一个大管家。它只一…

【ArcGIS错误异常100问】之002:Error 000735 简化容差:值是必需的(简化线、简化面工具)

测试环境: 操作系统:windows7ArcGIS版本:10.2结果:通过测试 文章目录1. 错误提示2. 问题分析3. 解决办法4. 问题验证1. 错误提示 在ArcGIS中使用简化面或者简化线工具时,点击确定会提示Error 000735:简化容…

mybatis中mysql转义讲解

本文为博主原创,未经允许不得转载: 在mybatis中写sql的时候,遇到特殊字符在加载解析的时候,会进行转义,所以在mybatis中 写sql语句的时候,遇到特殊字符进行转义处理。 需要注意的是,转义的字符为…

用Python执行js文件代码并获取返回结果

js代码(myjs.js): /** Title: This is a file for ……* Author: JackieZheng* Date: 2022-04-12 09:24:13* LastEditTime: 2022-04-12 09:40:55* LastEditors: Please set LastEditors* Description:* FilePath: myjs.js*/function hello(…

.NET桌面开发的一些思考

在22日,我在公众号上发布了一条短文字,内容如下:其实在.NET开发大军中,还有一股力量,那就是桌面程序的开发者们。他们很少发声,可能技术成熟,可能太企业化了,也可能我没关注到。最近…

【ArcGIS错误异常100问】之003:属性表中文乱码解决办法总结

测试环境: 操作系统:windows7ArcGIS版本:10.X、Pro结果:通过测试 文章目录1. 错误提示2. 原因分析3. 解决方法4. 问题验证1. 错误提示 如图所示,安装完ArcGIS Pro后,由于计算机系统和应用软件字符编码的问…

大型网站架构演化(二)——应用服务和数据服务分离

随着网站业务的发展,一台服务器逐渐不能满足需求:越来越多的用户访问导致性能越来越差,越来越多的数据导致存储空间不足。这时就需要将应用和数据分离。应用和数据分离后整个网站使用三台服务器:应用服务器、文件服务器和数据库服…

再不自动化就晚啦!优云教你4步打造基于CentOS的产品镜像

随着Linux程序的增多,软件的安装过程中经常出现如下问题: 1、硬件配置类似或者相同时,批量安装系统和软件,希望实现自动化安装,减少安装时间和人为出错。 2、工程实施人员在不同客户现场进行系统和软件安装(硬件配置不…