CSS3 Flex计算逻辑
2016-06-10 21:08
316 查看
Flex样式
Flex: flex-grow | flex-shrink | flex-basisflex-grow:纯数字,表示增长因子。默认值为0,表示按元素的原大小显示。
flex-shrink:纯数字,表示收缩因子。默认值是1,如果是0则按原始大小显示。当屏幕或容器变小时,不同元素的收缩比例可能与容器变大的逻辑是不一样的,所以会有这个属性。
flex-basis:表示flex-item(flexbox容器内的子元素)的原始大小,如果没有这个属性,默认使用flex-item的内容大小。这个属性相当于flex-item的width属性。
Flex-grow计算逻辑-横向展开
以下计算步骤只适用于当横向展开时flexbox容器宽度大于所有子元素的宽度时:1. 首先算出flexbox容器内所有子元素的原始宽度总和initial_space。
2. 用flexbox容器的总宽度减去initial_space,得到flexbox容器内剩余空间remained_space。
3. 获取flexbox容器中有flex-grow属性的子元素,算出flex-grow的总和grow_total。
4. Flew-grow=0的元素默认按原大小显示。
5. Flew-grow>0的元素,宽度=原宽度+ flexgrow/grow_tatal*remainded_space。
Flex-shrink计算逻辑
以下计算步骤只适用于当横向展开时flexbox容器宽度小于所有子元素的宽度时:1. 首先算出flexbox容器内所有子元素的原始宽度总和initial_space。
2. 用initial_space减去flexbox容器的总宽度,得到超出flexbox容器的那部分空间over_space。
3. 获取flexbox容器中flex-shrink>0的子元素,算出flex-shrink的总和shrink_total。
4. Flew-shrink=0的元素默认按原大小显示。
5. Flew-shrink>0的元素,宽度=原宽度-flexshrink/shrink_tatal*over_space。
Flex-basis计算逻辑
如果子元素有flex-basis,就算作子元素的原始width(不包括边框和补边)。如果子元素没有flex-basis,但有width属性,则使用width作为flex-basis。
如果flex-basis:content,表示默认使用元素内容大宽度。
相关文章推荐
- css设计立体文字
- 通过Qt样式表定制程序外观(比较通俗易懂)
- html/css排版一些简单的数学公式
- CSS预处理器 Less Sass,Scss 编译 Sourcemap调试
- css清除浮动
- css scrollbar 滚动条样式
- 《CSS权威指南》学习记录——定位(二)
- pt,px,rem和em之间区别总结
- CSS笔记二
- webstorm下搭建编译less环境 以及设置压缩css
- CSS3回顾系列0
- 视图控制器父类是使用Xib创建的,子类如何继承父类的样式
- 【CSS笔记三】CSS选择器
- 理解 position:relative 与 position:absolute
- CSS3实现炫酷进度条
- 创建一个纯CSS下拉菜单,支持三级菜单
- 【CSS笔记二】CSS样式基本知识
- CSS——CSS特性及选择器
- 【CSS笔记一】开始学习CSS,为网页添加样式
- 《CSS权威指南》学习记录——定位(一)