React Native-2.CSS布局属性之伸缩项目属性
来源:互联网 发布:wp服务器软件 编辑:程序博客网 时间:2024/06/04 19:34
版权声明:本文为博主原创文章,未经博主允许不得转载。
目录(?)[+]
接上一篇blog《React Native-1.CSS布局属性之伸缩容器属性》我们继续学习伸缩项目属性
伸缩项目属性
伸缩项目支持的属性有
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
下面我们介绍这6个属性
1、order
这个属性用语定义项目的排列顺序。数值越小,排列越靠前,默认为0,可以为负数。语法: order:integer
CSS代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
效果如图1-1:
图1-1 item5 的order属性为-1时的效果图
2、flex-grow
该属性定义伸缩项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有的伸缩项目的flex-grow
设置为1,那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你将其中一个伸缩项目的flex-grow
设置为2,那么这个伸缩项目所占的剩余空间时其他伸缩项目所占剩余空间的两倍。语法:
flex-grow:number /*默认为0*/
CSS代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
效果如图2-1:
图2-1 item5 的flex-grow
属性为1时的效果图
3、flex-shrink
该属性用来定义伸缩项目的收缩能力,当剩余空间不足时,自动降自身的宽或者高缩小为1/number,即number=3 就缩小为1/3,语法: flex-shrink:number/*默认值为1*/
CSS代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
效果如图3-1:
图3-1 item5 的flex-shrink
属性为3时的效果图
4、flex-basis
该属性用来设置伸缩项目的基准值,剩余的空间按比例进行伸缩,语法:
flex-basis: length | auto
CSS代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
效果如图4-1:
图4-1 item5 的flex-basis
属性为120px时的效果图
5、flex
该属性是flex-grow、flex-shrink、flex-basis
这三个属性的缩写。语法:
flex:flex-grow flex-shrink flex-basis
CSS语法:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
效果如图5-1:
图5-1 item5 的flex
属性为1时的效果图
注:该属性有两个快捷值:auto (1 1 auto) 和 none(0 0 auto)
6、align-self
该属性用来设置单独的伸缩项目在交叉轴上的对其方式,会覆盖默认的对齐方式。语法:
`align-self: auto | flex-start | flex-end | center | baseline | stretch
下面简要介绍这6个属性值:
auto
: 伸缩项目按照自身设置的宽高显示,如果没有设置,则按stretch来计算其值。
CSS语法:
- 1
- 2
- 3
- 1
- 2
- 3
效果如图6-1:
图6-1 item5 的align
属性为auto时的效果图
flex-start
: 伸缩项目向交叉轴的开始位置靠齐。
CSS语法:
- 1
- 2
- 3
- 1
- 2
- 3
效果如图6-2:
图6-2 item5 的align
属性为flex-start时的效果图
flex-end
: 伸缩项目向交叉轴的结束位置靠齐。
CSS语法:
- 1
- 2
- 3
- 1
- 2
- 3
效果如图6-3:
图6-3 item5 的align-self
属性为flex-end时的效果图
center
: 伸缩项目向交叉轴的中心位置靠齐。
CSS语法:
- 1
- 2
- 3
- 1
- 2
- 3
效果如图6-4:
图6-4 item5 的align-self
属性为center时的效果图
baseline
: 伸缩项目按极限对齐。
CSS语法:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
效果如图6-5:
图6-5
baseline
: 伸缩项目按极限对齐。
CSS语法:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
效果如图6-6:
图6-6 item5 的align-self
属性为stretch时的效果图
总结:我们介绍完了CSS中的伸缩属性及其用法,属性的大多数基准值都和方向有关系,多加练习,从简单到复杂,熟练掌握即可,下一篇我们学习React Native 中的flexbox
- React Native-2.CSS布局属性之伸缩项目属性
- React Native-2.CSS布局属性之伸缩项目属性
- React Native-1.CSS布局属性之伸缩容器属性
- React Native-1.CSS布局属性之伸缩容器属性
- React Native系列之flexbox布局(伸缩属性)
- React-native学习过程 七 flexbox伸缩项目属性
- react-native css属性
- React Native-4.React Native布局属性练习之flexBox模型实战
- React-native学习过程 六 flexbox伸缩容器属性
- React Native之Props属性
- React Native之onLayout属性
- React Native-4.React Native布局属性练习之flexBox模型实战
- React Native 的布局(容器属性)
- React Native-3.React Native中的主要布局属性介绍和练习
- React Native-3.React Native中的主要布局属性介绍和练习
- css伸缩布局盒flex属性 display:flex 详解
- React Native从零开始(二)Flexbox布局,和布局属性
- React Native之Text组件numberofLines属性
- 微信小程序更新6大新功能,扩大使用场景
- 开发板刷系统的补充 4月11
- FFmpeg图解:结构体关系链接图
- 数据库设计规范
- Scrapy学习笔记VII--Item Pipeline
- React Native-2.CSS布局属性之伸缩项目属性
- JAVA经典面试题(一)-- 判断以及防止SQL注入
- 64位win10 python3.5环境安装scrapy
- CodeForces
- 多线程虚假唤醒
- React Native-3.React Native中的主要布局属性介绍和练习
- 安防大数据需要深度智能
- 关于Struts2简单的登陆页面遇到的错误error Exception occurred during processing request: null
- Infobright 初探(转)