React Native－2.CSS布局属性之伸缩项目属性

接上一篇blog《React Native－1.CSS布局属性之伸缩容器属性》我们继续学习伸缩项目属性

伸缩项目属性

伸缩项目支持的属性有

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

下面我们介绍这6个属性

1、order

这个属性用语定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以为负数。语法：
order:integer

CSS代码：

.flex-container{ background-color: #f00; width: 190; height: 190; display: flex; flex-flow:row wrap; }
.flex-item5 { order:-1; }

效果如图1-1:

图1-1 item5 的order属性为-1时的效果图

2、flex-grow

该属性定义伸缩项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有的伸缩项目的flex-grow设置为1，那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你将其中一个伸缩项目的flex-grow设置为2，那么这个伸缩项目所占的剩余空间时其他伸缩项目所占剩余空间的两倍。语法：

flex-grow:number /*默认为0*/

CSS代码：

.flex-container{ background-color: #f00; width: 190; height: 190; display: flex; flex-flow:row wrap; }
.flex-item5 { flex-grow:1; }

效果如图2-1:

图2-1 item5 的flex-grow属性为1时的效果图

3、flex-shrink

该属性用来定义伸缩项目的收缩能力，当剩余空间不足时，自动降自身的宽或者高缩小为1/number,即number＝3 就缩小为1/3，语法：
flex-shrink:number/*默认值为1*/

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:

图3-1 item5 的flex-shrink属性为3时的效果图

4、flex-basis

该属性用来设置伸缩项目的基准值，剩余的空间按比例进行伸缩，语法：

flex-basis: length | auto

CSS代码：

flex-container{ background-color: #f00; width: 190; height: 190; display: flex; flex-flow:row wrap; }
.flex-item5 { flex-basis:120px; }

效果如图4-1:

图4-1 item5 的flex-basis属性为120px时的效果图

5、flex

该属性是flex-grow、flex-shrink、flex-basis这三个属性的缩写。语法：

flex:flex-grow flex-shrink flex-basis

CSS语法：

.flex-container{ background-color: #f00; width: 190; height: 190; display: flex; flex-flow:row wrap; }
.flex-item3 { flex:1 ; }

效果如图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语法：

.flex-item5 { align-self:auto; }

效果如图6-1:

图6-1 item5 的align属性为auto时的效果图

• flex-start : 伸缩项目向交叉轴的开始位置靠齐。

CSS语法：

.flex-item5 { align-self:flex-start; }

效果如图6-2:

图6-2 item5 的align属性为flex-start时的效果图

• flex-end : 伸缩项目向交叉轴的结束位置靠齐。

CSS语法：

.flex-item5 { align-self:flex-end; }

效果如图6-3:

图6-3 item5 的align-self属性为flex-end时的效果图

• center : 伸缩项目向交叉轴的中心位置靠齐。

CSS语法：

.flex-item5 { align-self:center; }

效果如图6-4:

图6-4 item5 的align-self属性为center时的效果图

• baseline : 伸缩项目按极限对齐。

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:

图6-5

• baseline : 伸缩项目按极限对齐。

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:

图6-6 item5 的align-self属性为stretch时的效果图

总结：我们介绍完了CSS中的伸缩属性及其用法，属性的大多数基准值都和方向有关系，多加练习，从简单到复杂，熟练掌握即可，下一篇我们学习React Native 中的flexBox