React Native混合開發中必需要學會點FlexBox佈局

 　　在前面的案例中，界面的搭建都是採用CSS的佈局，基於盒子模型，依賴 display屬性 ， position屬性， float屬性。但對於那些特殊佈局很是不方便，好比，垂直居中。

       一種全新的針對web和移動開發佈局應運而生：Flex佈局，能夠簡便、完整、響應式地實現各類頁面佈局。目前，它已經獲得了全部瀏覽器的支持，這意味着，如今就能很安全地使用這項功能。

1、FlexBox佈局

1.1 FlexBox是什麼意思呢？

flexible（形容詞）：可以伸縮或者很容易變化，以適應外界條件的變化

box（名詞）：通用的矩形容器

 

1.2  什麼是FlexBox佈局?

       彈性盒模型（The Flexible Box Module）,又叫Flexbox，意爲「彈性佈局」，旨在經過彈性的方式來對齊和分佈容器中內容的空間，使其能適應不一樣屏幕，爲盒裝模型提供最大的靈活性。

       Flex佈局主要思想是：讓容器有能力讓其子項目可以改變其寬度、高度（甚至是順序），以最佳方式填充可用空間；

       React native中的FlexBox是這個規範的一個子集。

 

1.3 大部分狀況下是處理圖中FlexItem在FlexContainer中的位置和尺寸關係 

 2、Flexbox在開發中的應用場景

 2.1 Flexbox在佈局中可以解決什麼問題？

     浮動佈局

     各類機型屏幕的適配

     水平和垂直居中

     自動分配寬度

     ......

 

2.2 在CSS中，常規的佈局是基於塊和內聯流方向，而Flex佈局是基於flex-flow流,下圖很好解釋了Flex佈局的思想：

　　容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start，結束位置叫作cross end。

       項目默認沿主軸排列，單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size。

 

 2.3 根據伸縮項目排列方式的不一樣，主軸和側軸方向也有所變化： 

3、Flexbox的經常使用屬性

3.1 容器屬性

a)  flexDirection: `row | row-reverse | column | column-reverse`

     該屬性決定主軸的方向（即項目的排列方向）。

     row：主軸爲水平方向，起點在左端。

     row-reverse：主軸爲水平方向，起點在右端。

    column(默認值)：主軸爲垂直方向，起點在上沿。

    column-reverse：主軸爲垂直方向，起點在下沿。

b）justifyContent:`flex-start | flex-end | center | space-between | space-around`

      定義了伸縮項目在主軸線的對齊方式

      flex-start(默認值)：伸縮項目向一行的起始位置靠齊。

      flex-end：伸縮項目向一行的結束位置靠齊。

      center：伸縮項目向一行的中間位置靠齊。

      space-between：兩端對齊，項目之間的間隔都相等。

      space-around：伸縮項目會平均地分佈在行裏，兩端保留一半的空間。

  c） alignItems:  `flex-start | flex-end | center | baseline | stretch`

       定義項目在交叉軸上如何對齊，能夠把其想像成側軸（垂直於主軸）的「對齊方式」。

      flex-start：交叉軸的起點對齊。

      flex-end：交叉軸的終點對齊 。

      center：交叉軸的中點對齊。

      baseline：項目的第一行文字的基線對齊。

      stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

d)  flexWrap: `nowrap | wrap | wrap-reverse`

       默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。

nowrap(默認值)：不換行。

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。（和wrap相反）

3.2 元素屬性

 a）flex

       「flex-grow」、「flex-shrink」和「flex-basis」三個屬性的縮寫， 其中第二個和第三個參數（flex-shrink、flex-basis）是可選參數。

   默認值爲「0 1 auto」。

   寬度 ＝ 彈性寬度 * ( flexGrow / sum( flexGorw ) )

 b）alignSelf:  「auto | flex-start | flex-end | center | baseline | stretch」

       align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

 

4、在React Native中使用Flexbox

4.1  獲取當前屏幕的寬度、高度、分辨率 

4.2  經常使用屬性Demo演示-絕對定位和相對定位

       與前面所學的css定位不一樣，在React Native中定位不須要再父組件中設置position屬性。

　　一般狀況下設置position和absolute，定位的效果是同樣的，可是若是父組件設置了內邊距，position會作出相應的定位改變，而absolute則不會。