flexbox----react native中的布局方式

flexbox,一种类似于流布局的布局方式，就是让组件按照一定的规律进行自动排列，涉及到四个重要属性：占比（flex）、分布方向（flexDirection）、内容调整方式（justifyContent）、整体对齐方式（alignItems）。

其中，父组件通过指定分布方向（flexDirection）、内容调整方式（justifyContent）、整体对齐方式（alignItems）来决定其子组件的分布情况；子组件通过指定占比（flex）来决定其在父组件中占据的空间比例。
分布方向

flexDerection，决定组件沿着哪个方向分布，备选的方案有按行分布（row）和按列分布（column）。
候选项：row, column
内容调整方式
justifyContent，这个决定了组件沿着既定的分布方向如何进行排列，比如按照行分布的情况下，可以选择全部靠左集中，也可以选择全部靠右集中，又或者是均匀分布，具体有以下候选项，可以逐一试试效果。
候选项有：flex-start, center, flex-end, space-around, and space-between
需要留意的是，当子组件的使用占比（后面会讲）来确定大小时，该选项不生效。
整体对齐方式
alignItems，决定组件在按照上面两个属性的约束排列以后，怎样在与分布方向垂直的方向上分布。
候选项：flex-start, center, flex-end, and stretch
stretch是拉伸，只有当组件在拉伸方向的尺寸没有被指定时，拉伸才有效。
占比
flex，这个决定了各个组件在排列的时候相对于其他组件所占据的空间比例，用整数表示可以是1,2,3,4,5,……。这个属性如何起作用呢，就是如果一共有两个组件按行排列，他们的flex属性分别是1和2，那么flex为1的组件宽度占据父组件的宽度的1/3，而flex为2的组件宽度占据父组件宽度的2/3。就是这么简单。

注意，如果子组件使用占比来自动调整大小，那么父组件样式中justifyContent选项不起作用。

来自官网的例子：

<View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
   <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
   <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
   <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

效果：