<View> <View style={styles.row}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> <View style={styles.rowReverse}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> <View style={styles.column}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> <View style={styles.columnReverse}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> </View>
样式代码：
row: { backgroundColor: '#ffe289', flexDirection: 'row' }, rowReverse: { flexDirection: 'row-reverse' }, column: { backgroundColor: '#ffe289', flexDirection: 'column' }, columnReverse: { flexDirection: 'column-reverse' },
图5. flexDirection
由于网上关于flex布局讲解的资源挺丰富的，读者可以参考最后给出的连接，或者自行上网搜索，CSS中的和RN是相通的。
这里主要分享个人在学习过程中，觉得容易引起混淆的两个小点。
首先，justify-content和align-content这两个属性，可能比较容易搞错它们作用的方向。
其中，justify-content是设置items沿着主轴上是如何分布的。align-content是设置items沿着侧轴如何对齐的。
还是拿之前的例子，默认情况下，flex的方向是column（这个与移动端与web页面不同，在web页面用CSS设置flex布局，默认的fiex-direction是row，即水平从左往右）。
在移动端，主轴默认是垂直方向，从上往下。让我们把它的高度设置高一点，放3个item在里面：
结构代码：
<View> <View style={styles.defaultFlex}> <Text style={styles.item}>1</Text> <Text style={styles.item}>2</Text> <Text style={styles.item}>3</Text> </View> </View>
样式代码：
defaultFlex: { height: 300, backgroundColor: '#ffe289', display: 'flex' }
图6. 默认的flex
justify-content设置items在主轴方向的如何分布，比如，如果我们加上justifyContent: 'space-between'
defaultFlex: { height: 300, backgroundColor: '#ffe289', display: 'flex', justifyContent: 'space-between' }
items就沿主轴分开了。
图7. justifyContent: 'space-between'
如果我们设置alignItems: 'center',项目就沿侧轴（这里就是水平轴）居中了。注意这两个属性是可以同时起作用的。