React Native-2.CSS布局属性之伸缩项目属性
接上一篇blog《React Native-1.CSS布局属性之伸缩容器属性》我们继续学习伸缩项目属性 伸缩项目属性伸缩项目支持的属性有
下面我们介绍这6个属性 1、order这个属性用语定义项目的排列顺序。数值越小,排列越靠前,默认为0,可以为负数。语法: CSS代码: .flex-container{ background-color: #f00; width: 190; height: 190; display: flex; flex-flow:row wrap; }
.flex-item5 { order:-1; }
效果如图1-1: 2、flex-grow该属性定义伸缩项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有的伸缩项目的
CSS代码: .flex-container{ background-color: #f00; width: 190; height: 190; display: flex; flex-flow:row wrap; }
.flex-item5 { flex-grow:1; }
效果如图2-1: 3、flex-shrink该属性用来定义伸缩项目的收缩能力,当剩余空间不足时,自动降自身的宽或者高缩小为1/number,即number=3 就缩小为1/3,语法: CSS代码: .flex-container{ background-color: #f00; width: 190; height: 190; display: flex; flex-flow:row nowrap; }
.flex-container div h1{ /*width:50;*/ height: 50; }
.flex-item5 { flex-shrink:3; }
效果如图3-1: 4、flex-basis该属性用来设置伸缩项目的基准值,剩余的空间按比例进行伸缩,语法:
CSS代码: flex-container{ background-color: #f00; width: 190; height: 190; display: flex; flex-flow:row wrap; }
.flex-item5 { flex-basis:120px; }
效果如图4-1: 5、flex该属性是
CSS语法: .flex-container{ background-color: #f00; width: 190; height: 190; display: flex; flex-flow:row wrap; }
.flex-item3 { flex:1 ; }
效果如图5-1:
6、align-self该属性用来设置单独的伸缩项目在交叉轴上的对其方式,会覆盖默认的对齐方式。语法: `align-self: auto | flex-start | flex-end | center | baseline | stretch 下面简要介绍这6个属性值:
CSS语法: .flex-item5 { align-self:auto; }
效果如图6-1:
CSS语法: .flex-item5 { align-self:flex-start; }
效果如图6-2:
CSS语法: .flex-item5 { align-self:flex-end; }
效果如图6-3:
CSS语法: .flex-item5 { align-self:center; }
效果如图6-4:
CSS语法: .flex-item1 { align-self:baseline; font-size: 10; }
.flex-item2 { align-self:baseline; font-size: 13; }
.flex-item3 { align-self:baseline; font-size: 16; }
效果如图6-5:
CSS语法: .flex-container div { width: 50; /*height: 50;*/ background-color: #00f; margin: 1 1 1 1; }
.flex-container div h1{ width:50; /*height: 50;*/ }
.flex-item1 { width: 50; height: 50; }
.flex-item2 { width: 50; height: 50; }
.flex-item3 { width: 50; height: 50; }
.flex-item4 { width: 50; height: 50; }
.flex-item5 { align-self:stretch; }
效果如图6-6:
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |