flex-grow 与flex-shink
flex-grow
- flex-grow的作用是灵活的分配父元素的剩余空间给子元素，强调的是父元素的剩余空间
- 每个子元素默认的flex-grow为0，及不划分剩余空间
- 所有子元素的flex-grow的总和表示把父元素的剩余空间分为多少份
- 每个子元素的flex-grow的值：又表示占父元素剩余空间的几份
- 如果flex-grow的值为小数，就是表示占剩余空间的百分比，如果小数小于1，就会有剩余空间没有被分配，会留白。
flex-shink
- flex-shink：表示超出父元素宽高的部分按照特定比例进行压缩（在子元素宽高总和大于父元素）
- flex-shink：0 代表不允许压缩；
- flex-shink：1代表合理压缩
- flex-shink 如果为小数代表该子元素需要被压缩，且压缩的部分占超出的部分的百分比，如果所有子元素flex-shink的总和小于，这会有部分没有被压缩，会超出父元素进行显示。
比如现在有一个父元素宽度为500
三个子元素，一个宽100px,一个宽200px，一个宽300px，现在每个子元素的flex-shink都为默认值1
那么现在超出100px，需要每个子元素按照特定的比例压缩自身宽度、
那么 加权总和(flex-shink的值x每个子元素的宽度) = 100x1+200x1+300x1
压缩率 = （每个子元素的flex-shink x 宽度）/ 加权总和
压缩值 = 压缩率 x 子元素自身宽度
flex-grow 与flex-shink相关推荐
- 手把手教你使用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 ...
最新文章
- 阶段总结——201511
- [css] margin和padding使用的场景有哪些？
- VB.NET 基础入门
- 2021年1月29日 B站学习资料汇总
- 对计算机系统进行软件攻击,win10系统预防电脑被系统漏洞攻击的操作方法
- 苹果雪豹系统_AI知识图谱，让我撸到了一只天山上的雪豹
- NoSQL--Redis
- ad怎么查接线_Altium怎么进行线路的开路检查？
- 0基础前端开发，html5建站教程
- 如何使用xposed强制开启android webview debug模式
- chrome无法检查更新解决方法
- 华为任正非：实事求是的科研方向与二十年的艰苦努力
- c++基础温习之指针分配空间
- 什么是promise，promise的用法。
- 20190827-Ubuntu查看内存槽的数目及内存信息
- 类的继承层次结构的宽度和深度
- Bios intelz77主板设置WakeOnLan网络唤醒
- 给水排水计算机应用课件,计算机在给排水工程中的应用课件.ppt
- 探索优傲机器人丨UR10e在电子制造业的应用
- 二叉搜索树的创建、插入、遍历、删除