flex-grow 和 flex-shrink 使用

2024-05-29 13:20:56

flex-grow

flex-grow处理父元素在还有剩余空间时的分配规则，分为两种情况。

即：所有元素的flex-grow值之和大于1，和小于1。
大于1时，例如：
父元素宽600px，子元素A和B，宽分别为200px，300px。还剩余100px。
此时A，B的flex-grow分别为2，3.
则剩余100px，分给A 2/5，分给B 3/5
A，B宽度为：
200+40=240px
300+60=360px

小于1时，作为分母的总和会引入1来处理。
例如：
上例中，A，B flex-grow分别为 0.2，0.3。
则分给A 0.2/1，分给B 0.3/1
A，B宽度为：
200+20=220
300+30=330
还剩50没有分配给任何子元素扩张。

另外，flex-grow还会受到父元素的max-width影响。如果grow后的结果超出max-width，max-width会优先生效。

flex-shrink

和flex-grow处理父元素剩余空间相对应的，是flex-shrink处理父元素空间不足时，子元素的收缩规则。

同样分为两种情况，所有元素的flex-shrink值之和大于1，和小于1。
大于1时，例如：
父元素宽度为600px，子元素宽度为400px，300px。超出100px。
A，B flex-shrink为别为 1，2
总权重为 400 + 300 * 2 = 1000
A收缩 -100 * 1 * 400 / 1000 = -40
B收缩 -100 * 2 * 300 / 1000 = -60
A，B实际宽度为：
400 - 40 = 360
300 - 60 = 240

小于1时，
例如， A，B flex-shrink分别为 0.1，0.2
总权重为 400 * 0.1 + 300 * 0.2 = 100
子元素收缩总和为 100 * 0.3 / 1 = 30
A收缩 -30 * 0.1 * 400 / 100 = -12
B收缩 -30 * 0.2 * 300 / 100 = -18
A，B实际宽度为：
400 - 12 = 388
300 - 18 = 282
多出70没有分配给任何子元素收缩。

同样，也会受到min-width的限制。

发现一个很好玩的flex使用游戏教程：http://flexboxfroggy.com/

flex-grow 和 flex-shrink 使用相关推荐

手把手教你使用Flex 3——《Flex 3程序设计》
手把手教你使用Flex 3 --<Flex 3 程序设计> 1954 年 Fortran 语言的发明,使软件业跨入了高级语言时代: 1972 年 Smalltalk 的发布,标志着&quo ...
flex socket java,Flex的socket与java使用amf3进行通信
amf3,adobe创立的数据格式由于使用二进制,没有了xml等冗余的字符数据量会少很多!而且很多测试报告均测出amf传递效果很高. 这次是使用Flex的Socket类与java的服务端进行通信, 步 ...
oracle flex cluster,Oracle Flex ASM和Flex集群
Oracle Flex ASM和Flex集群 Oracle RAC 12c 引入了两个新概念: 中心节点: 和以前的版本一样,它们通过专用网络相互连接,并且可以直接访问共享存储.这些节点可以直接访问 ...
Flex 3 与 Flex 4 beta 之间的区别
Flex 3 与 Flex 4 beta 之间的区别 Flex 4(代码名:Gumbo)beta 发行版在 Flex 3 基础上做出重大改动.Flex 4 beta 引入了一个新的组件和外观架构.但是 ...
oracle flex cluster,12c flex cluster小记（3）
先是安装数据库软件,这很容易,这边省略不讲了.我要讲的是安装完数据库软件之后,我用dbca建库,建库过程没报什么错,但是却发现完成后,2个节点只有一个节点有db instance,另一节点就是没有db ...
html 清除flex,清除display:flex样式
一.页面行排列布局像此图左右两个div一排显示可以用浮动的布局方式 html部分左侧区域右侧区域 css部分.main .left,.main .right{ border: 1px soli ...
flex 解析 html5,Flex布局详解
传统的布局解决方案,在处理一些特殊的布局方式时,非常繁琐,比如垂直居中实现起来就很不方便.而Flex在布局方面能给开发者带来极大的便利. Flex,Flexible Box的缩写,意为:弹性布局. 任 ...
Flex布局：Flex布局
1.flex布局与传统布局的区别传统布局: 兼容性好但是布局繁琐局限性,不能再移动端很好的布局 flex布局: 操作方便,布局简单,移动端应用广泛但是IE11或更低版本不支持flex布局使用范 ...
flex布局（flex 居中）
文章目录什么是flex 基本概念容器的属性 flex-direction flex-wrap flex-flow justify-content align-items align-content ...
flex布局中 flex:1和flex:auto的区别
首先 flex 是复合属性是添加给子元素的那咱们先来看 flex 中的各个参数 flex-grow 属性定义项目的放大比例默认为0 即如果存在剩余空间也不放大 flex-shrink ...

最新文章

热门文章