上篇大致上介紹了一下於 css vs React Native 的 flexbox 差異
這篇主要就是實際上的運用了！

什麼是彈性盒子 flexbox ?

之所以叫盒子，就是要將彈性項目(子項目)放入這個盒子裡面也就是容器，所以擁有 display:flex 屬性的標籤會是彈性項目們(子項目們)的容器(爸爸)。

看一下下面的 code

<View style={{ display: flex }}> 
  <Text>漢堡<Text>小黃瓜</Text></Text>
  <Text>三明治</Text>
  <Text>薯條</Text>
  <Text>熱狗</Text>
  <Text>太陽蛋</Text>
</View>

卡卡我是這樣分的
爸爸（View）- display: flex
孩子們（漢堡/三明治/薯條/熱狗/太陽蛋) - 就是放在爸爸裡面的元件
孫子(小黃瓜)跟他們的爸爸住一起（漢堡）

補充一下:
原生及就已經寫上style
display:flex
所以不需要重複再寫唷！

flex / justifyContent/ alignItem / flexDirection / flexWrap

簡單的開始 我們來將文字都放在畫面的中間

記得我們在 Day 6 所建立的 flex1.js 我們於此檔案的 styleseet 的 container 寫入以下

const styles = StyleSheet.create({
    container: {
        flex: 1, 
        //flex 決定此元素在頁面可用的區域，切成幾塊1 = 1塊，所以一整塊都是此元素的
        backgroundColor: 'pink',
        //backgroundColor 背景色
        alignItems: 'center',
        //alignItems 子項目對齊方式()
        justifyContent: 'center', 
        //justifyContent 子項目對齊方式(主軸)
    },
});

flex: 1 // 整個畫面只切一塊
backgroundColor: 'pink' // 背景色區塊就是代表盒子的區塊
justifyContent: 'center' // 孩子們主軸對齊方式
alignItems: 'center' // 孩子們次軸對齊方式
以上設定將孩子們集中在中間嚕！

React Native flexbox 中的元素介紹

大致上有這些元素

# 排列方向:
flexDirection: 'column' || 'row'
# 主軸對齊(爸爸):
justifyContent: 'flex-start' || 'flex-end' || 'center' || 'space-around' || 'space-between'
# 交叉軸對齊(爸爸):
alignItems: 'stretch' || 'flex-start' || 'flex-end' || 'center'
# 交叉軸子項目對齊(孩子):
alignSelf: 'flex-start' || 'flex-end' || 'center' || 'stretch' || 'auto'
# 換行(爸爸):
flexWrap: 'nowrap' || 'wrap' || 'wrap-reverse'
# Define relative fluidity of an element(爸爸):
flex: number (e.g. 1, 1/2)
#當空間不足，子項目長大縮小(子)：
flexGrow/flexShrink: 1 || 0 

1. flexWrap：是代表一條軸線排不下時，是否要換行。這是用於容器的屬性(爸爸)。

• 不換行 ：nowrap代表這個容器中的項目是只能擠在同一行之中。
• 換行：wrap則是允許多行。
  wrap-reverse 和 wrap 一樣可以允許多行，但排列會相反。
  補充: wrap 屬性須在容器屬性(爸爸)裡，搭配flexDirection:'row'，才會有感!

下圖為nowrap

下圖為 wrap

2. alignItems、alignSelf、alignContent：是”對齊方式”的意思。
   alignSelf 是用於彈性項目的屬性(孩子們)預設為stretch，是填滿的意思。
   alignItems 跟 alignContent 則是用於容器的屬性(爸爸)，都是應用在 cross axis(次軸)。

• alignSelf：為子項目在cross axis(相交軸)的對齊方式。
  // 請參照下圖
  藍色：flex-start
  紅色：center
  橘色：flex-end
  黃色綠色：stretch
• alignContent：只有在項目被 flexWrap 包裹(wrapped)成為多行排列時，才會發生作用。

3. justifyContent： ”對齊”的意思，它是用在 main axis(主軸)時的對齊。這是用於容器的屬性(爸爸)。

• flex-start(默認值)
• flex-end
• center
• space-between
• space-around：兩端對齊，項目之間的間隔都相等。
• space-evenly：伸縮項目會平均地分布在行里，兩端保留一半的空間。

4. grow/shrink/basis： 這三個是用於子項目的”彈性”屬性，也就是在版面或外部容器的尺寸變動時，子項目應該如何隨之進行變動。設定在子項目。

• grow 當有空間時，先”變大”的意思。
• shrink 當畫面不足時，先”縮水”的意思。
• basis ”標準”的意思。

5. flexDirection: 為排列方向，預設排列為垂直排列column。

• row 水平排列
• column 垂直排列
• column-reverse 垂直反方向牌
• row-reverse 水平反方向著排

下圖為 row 水平排列

下圖為 column 垂直排列

Day 7 done 希望大家有更了解 flexbox XD