伸缩布局flex取值的区别
来源:互联网 发布:mybatis打印sql语句 编辑:程序博客网 时间:2024/05/17 22:15
伸缩布局中的flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。flex-grow属性设置项目的放大比例,默认为0,即如果存在剩余空间,也不放大。flex-shrink属性设置项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。flex-basis属性设置在分配多余空间之前,项目占据的主轴空间,默认值为auto,即项目的本来大小。
flex取值情况如下:
flex取值为none,即0 0 auto。等同于flex-grow:0; flex-shrink:0; flex-basis:auto。
flex取值为auto,即1 1 auto。等同于flex-grow:1; flex-shrink:1; flex-basis:auto。
flex取值为非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%。
flex取值为一个长度或百分比,则为flex-basis的值,flex-grow和flex-shrink均取1。
flex取值为两个非负数字,则分别为flex-grow和flex-shrink的值,flex-basis取0%。
flex 取值为一个非负数字和一个长度或百分比,则分别为 flex-grow 和 flex-basis 的值,flex-shrink 取 1。flex-basis 规定的是子元素的基准值。
flex取值详解参见以下链接
https://segmentfault.com/q/1010000004080910/a-1020000004121373
flex布局语法参见以下链接
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
flex布局实例参见以下链接
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
- 伸缩布局flex取值的区别
- Flex弹性伸缩布局
- 伸缩盒(flex布局)
- 伸缩布局flex
- 伸缩布局flex
- flex弹性伸缩布局笔记
- 伸缩布局的伸缩比例
- Flex-伸缩布局-flex-常用标签
- CSS3 flex 伸缩布局盒模型
- display:flex 弹性伸缩布局详解
- css伸缩布局盒flex属性 display:flex 详解
- CSS3弹性伸缩布局(二)——flex布局
- CSS3弹性伸缩布局——flex布局
- 伸缩布局
- 伸缩布局
- 最常用的display伸缩布局
- 使用布局设计可伸缩的对话框
- Flex中取DataGrid里的值
- Android Api demo系列(一) (App>Activity>Animation)
- js将具有连续相同内容的列进行合并
- csu1328模拟
- 2017.08.23工作日记
- Word Break && Word Break II
- 伸缩布局flex取值的区别
- 回顾Android Studio音乐播放器的编写
- 算法提高 ADV-83 寻找三位数
- vue搭建项目
- 一致性Hash算法
- Innodb的行级锁的特性
- 使用Intent来启动活动
- 算法提高 ADV-84 图形输出
- Android异常分析