React Native从入门到深入五--Flexbox布局样式

前一篇介绍了Flexbox的各个属性直接的区别，主轴和侧轴直接的区别。接下来讲解一下，Floxbox如何使用的一些小的demo.

一、  布局样式的属性：

alignItems

alignSelf

borderBottomWidth

bvborderLeftWidth

borderRightWidth

borderTopWidth

bottom

flex

flexDirection

flexWrap

justifyContent

margin

marginBottom

marginHorizontal

maxHeight 最大高 使用逻辑相位单位 不能使用百分比 EMS 或者任何

padding 

position 位置 有相对位置和绝对位置。

zIndex 用来设置那些组件在他人之上显示控件。通常情况下，你不使用zIndex。组件根据其在文档树顺序呈现，所以后来组件绘制于前面的。zIndex可能是有用的，如果你有，你不希望这种行为的动画或自定义模式的接口。

二、  属性使用小demo

2.1  获取当前屏幕的宽度、高度、分辨率

运行结果：

2.1  相对位置和绝对位置

和css的布局不同的是， 元素容器不用設置position：'absolute|relative' .

运行结果：

结论：通常情况下设置position和absolute，定位的效果是一样的，但是如果父组件设置了内边距，position会做出相应的定位改变，而absolute则不会。

2.3  宽度的设置问题

运行结果：

注意：容器需要添加flexDirection才能让子元素flex;

结论：flex的元素如果不设置宽度， 都会百分之百的占满父容器。

2.4  水平垂直居中

注意：一旦设置alignItems属性之后，组件的大小包裹随着内容的尺寸；此外水平居中和垂直居中还要结合FlexDirection进行判断。

运行结果：