react-native 就下面四種 flex 屬性控制佈局

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
  },
  item: {
    backgroundColor: '#4385f5',
    color: 'white',
    textAlign: 'center',
    fontSize: 50,
    lineHeight: 100,
    width: 100,
    height: 100,
    margin: 5,
  },
  //flexDirection（主軸）
  //column（預設 從上向下）| column-reverse |  row | row-reverse 
  box_flexDirection: {
    flexDirection: 'column'
  },
  //justifyContent（描述子盒子之間的距離）
  //flex-start（預設 從右邊開始）| flex-end | center | space-between（兩端靠邊，專案之間間距相等）| space-around（每個專案兩側的間隔相等）
  //需要 item 寬高調整小一些，才可以看見效果
  box_justifyContent: {
    justifyContent: 'flex-start',
    flexDirection: 'row',    
  },
  //flexWrap （描述一行排滿是否換行） 
  //nowrap（預設 不換行）| wrap 
  box_flexWrap: {
    flexWrap: 'wrap',
    flexDirection: 'row',
  },
  //alignItems（用於描述交叉軸（又名 側軸））
  //flex-start（預設）| flex-end | center | baseline（第一行字型對齊）| stretch（側軸方向撐滿）
  box_alignItems: {
    alignItems: 'flex-start'
  },
});
複製程式碼

GitHub: https://github.com/liangtongzhuo/react_native_flex