由於剛從android 原生轉過來做混合開發，習慣了什麼線性佈局，相對佈局等，對ReactNative 中的佈局還是一團黑，慢慢學習吧。每天總結一些自己遇到的。

發現一個兄弟已經總結了，就搬過來，原文地址：請點選這裡

Flexbox 介紹

flexbox是由伸縮容器和伸縮專案組成。任何一個元素都可以使用flexbox佈局。容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end

容器屬性

1.flexDirection 專案的排列方向

container: {
    flexDirection:‘row’, //主軸水平，起點在左，預設值            
    flexDirection:‘column’
 
, //主軸垂直，起點在上
    flexDirection:‘row-reverse’, //主軸水平，起點在右，
    flexDirection:‘column-reverse’, //主軸垂直，起點在下
}

2.flexFlow 預設情況下，專案都排在一條直線上，主要定義如果一條直線排不下，如何換行

container: {
    flexWrap:'nowrap', // 不換行， 預設
    flexWrap:'wrap', // 換行，第一行在上方
    flexWrap:'wrap-reverse', // 換行，第一行在下方
}

wrap

wrap-reverse

container: {
     flexFlow:'flex-direction',
     flexFlow:'flex-wrap',
}

container: {
    justifyContent:'flex-start', // 左對齊，預設值
    justifyContent:'flex-end', // 右對齊
    justifyContent:'center', // 居中
    justifyContent:'space-between', // 兩端對齊，專案之間間隔相等
    justifyContent:'space-around', // 每個專案兩端的間隔相等。所以專案間的間隔比專案與邊框的間隔大一倍
}

5.alignItems 在交叉軸上如何對齊，只有在flexDirection為column時

container: {
    alignItems:'flex-start', // 交叉軸起點對齊
    alignItems:'flex-end', // 交叉軸終點對齊
    alignItems:'center', // 交叉軸中點對齊
    alignItems:'baseline', // 專案第一行文字的基線對齊
    alignItems:'stretch', // 如果專案未設定高度或設為auto，將佔滿整個容器的高度
}

6.alignContent 定義了多根軸線的對齊方式，如果專案只有一根軸線，該屬性不起作用。

container: {
    alignContent:'flex-start', // 與交叉軸的起點對齊
    alignContent:'flex-end', // 與交叉軸的終點對齊
    alignContent:'center', // 與交叉軸的中點對齊
    alignContent:'space-between', // 與交叉軸兩端對齊，軸線之間的間距間隔平均分佈
    alignContent:'space-around', // 每根軸線兩側的間隔相等
    alignContent:'stretch', // 軸線佔滿整個交叉軸，預設值
}

6.flex當一個元素定義了flex屬性時，表示該元素是可伸縮的（flex的屬性值大於0的時候才可伸縮）

container: {
    flex:1, //只看中比例，不看重實際數值
}