Flex中宽度计算
flex
有三个属性值,分别是 flex-grow
, flex-shrink
, flex-basis
,默认值是 0 1 auto
。 发现网上详细介绍他们的文章比较少, 今天就详细说说他们,先一个一个看。
flex-grow
定义项目的放大
比例,默认值为0
,就算存在剩余空间,也不会放大。单单几句话肯定不能表达出意思,来看个DEMO。
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
,注意前提是空间不足的情况下,看例子。
这里 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布局以后,子元素的float
、clear
和vertical-align
属性将失效。
Flex中宽度计算的更多相关文章
- Flex中设置Camera的视频清晰质量的最佳配合
今天需要设置Flex中的Camera组件的一些属性,后来发现清晰度不是很高,于是捣鼓了上午半天,设置了很多的参数,竟然发现手册上就是有现成的一些设置方法,郁闷!不过我还是专门设置了几个有用和必要的属性 ...
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
- Flex中容器的完全隐藏
在html中,但我们设置某个dom元素的display属性为none时,dom元素不可见且其占用空间从dom树上隐藏,而在Flex中,但我们把某个组件的visible属性visible设为false的 ...
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
- ArcGIS for Flex中引入google map作底图
上篇文章到在ArcGIS View中引入google map,这里讲ArcGIS for Flex中引入google map作底图. 同样道理,以google map作底图,需要编写继承自TiledM ...
- AS与JS相互通信(Flex中调用js函数)
转载自http://www.blogjava.net/Alpha/archive/2009/06/27/284373.html Flex中As调用Js的方法是: 1.导入包 (import f ...
- SharedObject使用:在FluorineFx.net与Flex中使用共享对象维护在线用户列表实例【转】
一.添加一个新的FluorineFx的服务类项目OnLineService,删除原有的Sample.cs,并添加一个用户类定义与一个ApplicationAdpater类:如下: /*-- User. ...
- Flex中NetConnection与NetStream的关系、及浏览器并发连接数测试[转]
最近在做一个基于BS结构的视频会议系统,决定采用开源的FluorineFx.net与Flex结合的方法进行开发,前期开发都非常顺利,包括同步白板等.但到了实时视频传输的时候,原本设计是每个客户端可以显 ...
- Flex中 Array 的IndexOf 的作用
Flex中 Array 的IndexOf 的作用 1.说明 indexOf用于在索引中从小到大查找,假设查得到就返回索引值,查不到就返回-1: 2.实例 (1)设计源代码 <?xml ve ...
随机推荐
- Html语言,使用<a>标签发送电子邮件
<a>标签有一个功能是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件. 使用mailto 属性时请参考下表: 如果mailto里同时有多个参数,第一个参数必 ...
- Just Finish it up UVA - 11093
Just Finish it up Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu [Sub ...
- bzoj2730(矿场搭建)
矿场搭建,不知道为什么,莫名其妙T了在212上,额,zyh数据真的坑. bzoj200轻松跑过啊. 就是点双联通分量缩点,然后标记割点,一个块如果有>=2个割点,则不需要挖矿洞, 如果只有一割点 ...
- ubuntu环境配置eclipse+opencv
blockquote { direction: ltr; color: rgb(0, 0, 0) } blockquote.western { font-family: "Liberatio ...
- Postgresql在线备份和恢复
1.实验环境 OS: RedHat Linux Enterprisedb 6.3 DB: postgresql 9.3 PGHOME: /opt/PostgreSQL/9.3 PGDATA: /opt ...
- Angular和Spring Boot一起做个项目
引言 最近由于公司人员调整,我不得不去转去做前端,被迫用三周的时间学习Angular,同时需要做一个简单的Web聊天室.对于前端不一点感冒的我而言,其实还算一个不小的挑战.在三周的过程中,我遇到很多的 ...
- Jquery仿京东分类导航层简单实现
<script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script& ...
- 一个scrapy框架的爬虫(爬取京东图书)
我们的这个爬虫设计来爬取京东图书(jd.com). scrapy框架相信大家比较了解了.里面有很多复杂的机制,超出本文的范围. 1.爬虫spider tips: 1.xpath的语法比较坑,但是你可以 ...
- 深度学习入门篇--手把手教你用 TensorFlow 训练模型
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:付越 导语 Tensorflow在更新1.0版本之后多了很多新功能,其中放出了很多用tf框架写的深度网络结构(https://git ...
- 组件 layui 常用控件输入框
一.普通输入框 input <div class="layui-form-item"> <label class="layui-form-label&q ...