如下：
-
1、alignItems 伸缩项目在交叉轴上的对齐方式
flex-start (默认值）交叉轴上以开始位置对齐 flex-end 交叉轴上已结束位置对齐 center 交叉轴上以中间对齐 stretch 已拉伸的效果展示 -
2、alignSelf 用来设置单独的伸缩项目在交叉轴上的对齐方式。会覆盖默认的对齐方式。
auto flex-start flex-end center stretch （如果交叉轴为垂直方向的话，只有在不设置高度的话，才能看到效果 ）（伸缩项目在交叉轴方向占满容器） -
3、flex 是flex-grow 、 flex-shrink 、flex-basis 这三个属性的缩写。其语法：
flex:none | flex-grow flex-shrink flex-basis ,其中第二个和第三个参数为可选参数 ，默认值为 ： 0,1 auto -
4、flex-direction 主轴线的方向
row 从左到右的方向 row-reverse 相反的方向（从右刀左） column 从上到下的方向（默认 手机嘛） column-reverse 从下到方向 -
5、flex-wrap
wrap 自动换行 norap 不管怎样不换行 wrap-reverse 自动换行 以反方向换 -
6、justify-content (在主轴线上的对齐方式)
flex-start 左对齐（起始位置） flex-end 右对齐 center 中间对齐 space-between 平均分布在界面上 space-around 中间的间距=两边的边距相加
下面就是实战了哦
flexDirection
flexDirection 在rn中默认是从上到下排列的。
export default class AwesomeProject extends Component {
render() {
return (
<View style={{backgroundColor:'red',margin:20}}>
<View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
);
}
}
里面没有定义 任何属性 默认是从上到下 flexDirection:'column' 效果图为：
当flexDirection:'column-reverse' 从下到上
当flexDirection:'row' 从左到右的排列
当flexDirection:'row-reverse' 从右到左的排列
下面放下 一个整体的代码
export default class AwesomeProject extends Component {
render() {
return (
<View style={{backgroundColor:'red',margin:20,flexDirection:'column-reverse'}}>
<View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
<Text style={{fontSize:16}}>1</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
<Text style={{fontSize:16}}>2</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
<Text style={{fontSize:16}}>3</Text>
</View>
<View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
<Text style={{fontSize:16}}>4</Text>
</View>
</View>
);
}
}
flex-wrap 是否自动换行
为每个 小的view的宽度设为 140了。横向排列
这样出现的效果图是：``flexWrap:'nowrap'``` 默认是这样的 不管怎么样 都不换行
很明显已经不能全部显示了
flexWrap:'wrap' 进行自动换行的
wrap-reverse 此属性不支持。。。
justifyContent 在主轴线上的对齐方式)
默认为:justifyContent:'flex-start' 从左到右的对齐方式
justifyContent:'flex-end' 从右到左的对齐方式 （元素的最右侧和主轴的最右侧进行对其）
justifyContent:'center' 交叉轴上以中间对齐 两个箭头的到左右的距离是相等的
justifyContent:'space-between' 平均分布在界面上 中间的距离是相等的
justifyContent:'space-around' 最左侧元素到左边的距离 最右侧元素到右边的距离 是元素间距离的一半
alignItems 伸缩项目在交叉轴上的对齐方式
flex-start（默认） 在纵轴上开始的位置上进行排列
这个是变化的布局 代码
下面是具体的展示效果
flex-end在纵轴上结尾为基线排列
center在纵轴开始进行居中排列
alignItems:'stretch' 进行拉伸
如果是 横向排列的（flexDirection:'row'）就不好限制子控件的高度了。
反之 纵向排列（flexDirection:'column'）就不要限制它的宽度了。
进行子视图的属性
alignSelf 子视图的排列方式，相当于重写父视图的 alignItems
详细请看
alignSelf:'flex-end' 右对齐
alignSelf:'center' 中间对齐
flex 权重比例 就是伸缩的能力 默认为0
效果图为
borderWidth:10指定视图的边框是10
borderColor:'blue' 指定视图的边框颜色是蓝色
效果图是：
还有其他的属性 请看
视图的padding margin
和Android 一样的
给父视图进行设置 padding值
left right top bottom 都可以设置的属性 意思是偏离的距离
