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属性将失效。

Flex中宽度计算的更多相关文章

  1. Flex中设置Camera的视频清晰质量的最佳配合

    今天需要设置Flex中的Camera组件的一些属性,后来发现清晰度不是很高,于是捣鼓了上午半天,设置了很多的参数,竟然发现手册上就是有现成的一些设置方法,郁闷!不过我还是专门设置了几个有用和必要的属性 ...

  2. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  3. Flex中容器的完全隐藏

    在html中,但我们设置某个dom元素的display属性为none时,dom元素不可见且其占用空间从dom树上隐藏,而在Flex中,但我们把某个组件的visible属性visible设为false的 ...

  4. Vue - 在v-repeat中使用计算属性

    1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...

  5. ArcGIS for Flex中引入google map作底图

    上篇文章到在ArcGIS View中引入google map,这里讲ArcGIS for Flex中引入google map作底图. 同样道理,以google map作底图,需要编写继承自TiledM ...

  6. AS与JS相互通信(Flex中调用js函数)

    转载自http://www.blogjava.net/Alpha/archive/2009/06/27/284373.html Flex中As调用Js的方法是:     1.导入包 (import f ...

  7. SharedObject使用:在FluorineFx.net与Flex中使用共享对象维护在线用户列表实例【转】

    一.添加一个新的FluorineFx的服务类项目OnLineService,删除原有的Sample.cs,并添加一个用户类定义与一个ApplicationAdpater类:如下: /*-- User. ...

  8. Flex中NetConnection与NetStream的关系、及浏览器并发连接数测试[转]

    最近在做一个基于BS结构的视频会议系统,决定采用开源的FluorineFx.net与Flex结合的方法进行开发,前期开发都非常顺利,包括同步白板等.但到了实时视频传输的时候,原本设计是每个客户端可以显 ...

  9. Flex中 Array 的IndexOf 的作用

    Flex中 Array 的IndexOf 的作用 1.说明    indexOf用于在索引中从小到大查找,假设查得到就返回索引值,查不到就返回-1: 2.实例 (1)设计源代码 <?xml ve ...

随机推荐

  1. Mysql查询优化小结

    转自http://www.cnblogs.com/112ba/p/6220650.html 数据类型 简单原则:更小更好,简单就好,避免NULL1)整型如int(10)括号中的值与存储大小无关2)实数 ...

  2. (转)深度学习word2vec笔记之基础篇

    深度学习word2vec笔记之基础篇 声明: 1)该博文是多位博主以及多位文档资料的主人所无私奉献的论文资料整理的.具体引用的资料请看参考文献.具体的版本声明也参考原文献 2)本文仅供学术交流,非商用 ...

  3. MySQL or MariaDB 错误解决方法之报错代码1045

    phpMyAdmin登录报错:mysqli_real_connect(): (28000/1045): Access denied for user 'root'@'localhost' (using ...

  4. JS判断访问设备是移动设备还是pc

    <scripttype="text/javascript"> function browserRedirect() { var sUserAgent= navigato ...

  5. 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

    原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...

  6. Python selenium 文件自动下载 (自动下载器)

    MyGithub:https://github.com/williamzxl 最新代码已经上传到Github,以下版本为stupid版本. 由于在下载过程中需要下载不同文件,所以可以把所有类型放在Va ...

  7. Slf4j+Log4j日志框架入门

    (一).日志系统介绍 slf4j,即简单日志门面(Simple Logging Facade for Java),不是具体的日志解决方案,它只服务于各种各样的日志系统.简答的讲就是slf4j是一系列的 ...

  8. 架构师必备软件:安装Dubbo注册中心(Zookeeper-3.4.6)

    Dubbo建议使用Zookeeper作为服务的注册中心. http://www.roncoo.com/details?cid=f614343765bc4aac8597c6d8b38f06fd 注册中心 ...

  9. python中时间日期格式化符号:

    %y 两位数的年份表示(00-99) %Y 四位数的年份表示(000-9999) %m 月份(01-12) %d 月内中的一天(0-31) %H 24小时制小时数(0-23) %I 12小时制小时数( ...

  10. [Java Web 第一个项目]客户关系处理系统(CRM)项目总结

    一.table的应用: 1.表格的常用属性 基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔).cellpadd ...