介紹flexbox佈局
flexbox是React Native應用開發中必不可少的內容，也是最常用的內容。flexbox是由W3C在2009年提出的一種新的佈局方案，該佈局可以簡單快速地完成各種伸縮性的設計。
flexbox是Flexible Box的縮寫，即爲彈性盒子佈局。
flexbox佈局由伸縮容器和伸縮項目組成。採用Flex佈局的元素稱爲伸縮容器。伸縮容器的子元素成爲伸縮項目，伸縮項目使用伸縮佈局模型來排版。
伸縮容器的屬性
伸縮容器支持的屬性有：
- display
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
display
該屬性用來制定元素是否爲伸縮容器，其語法爲：
display:flex | inline-flex
- flex：這個值用於產生塊級伸縮容器，此時時父元素是
block元素。 - inline-flex：這個值用於產生行內級伸縮容器，此時時父元素是
inline元素。
flex-direction
該屬性用於指定主軸方向，其語法爲：
flex-direction: row | row-reverse | column | column-reverse
- row: 默認值，如果爲橫向伸縮，則無需定義。該屬性指定如果伸縮容器爲水平方向軸，排版方式爲從左向右排列。
- row-reverse: 如果伸縮容器爲水平方向軸，排版方式爲從右向左排列。
- column: 如果伸縮容器爲垂直方向軸，排版方式爲從上到下排列。
- column-reverse: 如果伸縮容器爲垂直方向軸，排版方式爲從下向上排列。
flex-wrap
該屬性用於指定伸縮容器的主軸線方向空間不足的情況下，是否換行以及如何換行，其語法爲：
flex-wrap: nowrap | wrap | wrap-reverse
- nowrap: 默認值，即使空間不足，伸縮容器也不允許換行。
- wrap:允許換行。若主軸爲水平軸，換行方向爲從上到下。
- wrap-reverse:允許換行。若主軸爲水平軸，換行方向爲從下向上。
flex-flow
該屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。
justify-content
該屬性用來定義伸縮項目沿主軸線的對齊方式，其語法爲：
justify-content: flex-start | flex-end | center | space-between | space-around
- flex-start: 默認值，伸縮項目向主軸線的起始位置靠齊。
- flex-end: 伸縮項目向主軸線的結束位置靠齊。
- center: 伸縮項目向主軸線的中間位置靠齊。
- space-between: 伸縮項目平均地分佈在主軸線裏。第一個伸縮項目在主軸線的開始位置，最後一個伸縮項目在主軸線的終點位置。
- space-around: 伸縮項目平均地分佈在主軸線裏。兩端會保留間距一半的空間。
align-items
該屬性用來定義伸縮項目在伸縮容器的交叉軸上的對其方式，其語法爲：
align-items: flex-start | flex-end | center | baseline | stretch
- flex-start: 伸縮項目向交叉軸的起始位置靠齊。
- flex-end: 伸縮項目向交叉軸的結束位置靠齊。
- center: 伸縮項目向交叉軸的中間位置靠齊。
- baseline： 伸縮項目根據他們的基線對齊。
- stretch： 默認值，伸縮項目在交叉軸方向拉伸填充整個伸縮容器。
align-content
該屬性用來調整伸縮項目出現換行後在交叉軸上的對齊方式，類似於伸縮項目在主軸上使用justify-content。其語法爲：
align-content: flex-start | flex-end | center | space-between | space-around | stretch
- flex-start：伸縮項目向交叉軸的起點對齊。
- flex-end：伸縮項目向交叉軸的終點對齊。
- center：伸縮項目向交叉軸的中間位置對齊。
- space-between：伸縮項目向交叉軸兩端對齊，軸線之間的間隔平均分佈。
- space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認值）：伸縮項目會在交叉軸上伸展以佔用剩餘的空間。
伸縮項目的屬性
伸縮項目支持的屬性有：
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
該屬性用來定義項目的排列順序。數值越小，排列越靠前，默認爲0。其語法爲：
order:
flex-grow
該屬性定義項目的放大比例，默認爲0，即如果存在剩餘空間，也不放大。如果所有項目的flex-grow屬性都爲1，則它們將等分剩餘空間（如果有的話）。如果一個項目的flex-grow屬性爲2，其他項目都爲1，則前者佔據的剩餘空間將比其他項多一倍。其語法爲：
flex-grow: /默認值爲0/
flex-shrink
該屬性定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小。
flex-shrink: ; /* default 1 */
如果所有項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性爲0，其他項目都爲1，則空間不足時，前者不縮小。
負值對該屬性無效。
flex-basis
該屬性定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。
該屬性相當於設置了伸縮項目的一個基準值，剩餘的空間按比率進行伸縮。其語法爲：
flex-basis: | auto; /* default auto */
flex
該屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。其語法爲：
flex: none | <’flex-grow’> <’flex-shrink’> <’flex-basis’>
align-self
該屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch
- atuo: 伸縮項目按自身設置的寬高顯示，如果沒有設置，則按stretch來計算其值。
- flex-start: 伸縮項目向交叉軸的起始位置靠齊。
- flex-end: 伸縮項目向交叉軸的結束位置靠齊。
- center: 伸縮項目向交叉軸的中間位置靠齊。
- baseline： 伸縮項目根據他們的基線對齊。
- stretch： 伸縮項目在交叉軸方向拉伸填充整個伸縮容器。
在React Native中的使用flexbox
React Native主要支持以下屬性：
- alignItems
- alignSelf
- flex
- flexDirection
- flexWrap
- justifyContent
這些屬性的用法和語法和上面介紹的是一樣的，區別在於需要用駝峯拼寫法。
實例
