React Native - Flexbox

Flexbox 通常用作指定 某個/某些 組件的子元素的佈局

flexDirection ： 指定flex元素的方向

• column ，按y軸方向排列
  

  <View style={{ flex: 1, flexDirection: 'row' }}></View>

• row，按x軸方向排列
  

  <View style={{ flex: 1, flexDirection: 'column' }}></View>

alignItems ： 能夠決定其子元素沿着次軸（與主軸垂直的軸，好比若主軸方向爲row，則次軸方向爲column）的排列方式

• flex-start

• center

• flex-end
• stretch


   

  


justifyContent ： 決定其子元素沿着主軸的排列方式

• flex-start，從flex容器的開始位置排列
• center，從flex容器的中間位置開始排列
• flex-end，從flex容器的結尾位置開始排列
• space-around，平均分配單個子元素的左右兩邊space

• space-between，平均分配子元素的中間元素的space

• space-evenly，平均分配全部子元素兩邊的space