# Flexbox

在React Native中尺寸是沒有單位的，它代表了設備獨立像素。 這些單位確保了在任何不同dpi的裝置上顯示不會發生改變。

* 運行在Android時，寬高等單位是dp，字體單位是sp
* 運行在iOS時，尺寸單位是pt

長寬沒設定的話，默認佔用100%

![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/basic/flexbox/1.png)

* main axis:主軸
* cross axis:交叉軸
* flex container:父容器
* flex item:子元素

此篇不附圖，可以搭配著下方的實踐或者參考網址們看排出來的實際樣子 <br>

### **Propety**

* flex

  > 數字，佔用的比例
* flexDirection

  > enum('row', 'column', 'row-reverse', 'column-reverse') 預設為column 此屬性定義佈局的主軸和方向(orientation of main axis of your layout) 主軸為vertical(column)或者horizontal(row) 根據有無reverse來決定方向，例如('row-reverse')或者('column-reverse)
  >
  > * row:從左向右依次排列
  > * row-reverse:從右向左一次排列
  > * column:從上向下排列
  > * column-reverse:從下向上排列
* flexWrap

  > enum('wrap', 'nowrap') 預設為nowrap 此屬性定義子元素在父容器中是否允許多行排列
  >
  > * nowrap，不允許多行，可能導致溢出
  > * wrap，一行排列不下時，就會多行排列
* justifyContent

  > enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around') 預設為flex-start 此屬性定義主軸上的對齊方式和元素之間及其周圍空間
  >
  > * flex-start:從頭開始排序。例如flexDirection是row時，從左側開始排
  > * flex-end:從尾開始排序。例如flexDirection是row時，從右側開始排
  > * center:主軸上置中。例如flexDirection是row時，子元素們左右置中
  > * space-between:從首個元素到最後個元素間平均分配父容器剩餘的空間。首跟尾元素與父容器中都沒有留白。
  > * space-around:將父容器剩餘的空間平均分配給每個元素的周圍。首跟尾元素與父容器中都有留白。子元素之間的間隔是首和尾元素距離父容器邊緣的兩倍。
* alignItems

  > enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline') 預設為stretch 此屬性定義交叉軸(cross axis)上的對齊方式
  >
  > * flex-start:子元素向父容器的交叉軸起點方向對齊。例如當flexDirection為row時，子元素對齊父容器的上方
  > * flex-end:子元素向父容器的交叉軸終點方向對齊。例如當flexDirection為row時，子元素對齊父容器的下方
  > * center:交叉軸上置中。例如flexDirection是row時，子元素們上下置中
  > * stretch:如果未設置高度或者高度設為auto，項目將佔滿整個容器的高度，否則該值不會生效
  > * baseline:以子元素的第一行文字的基線對齊

更詳細的內容 [Flexbox佈局詳解](http://liuwangshu.cn/rn/primer/4-flexbox.html)    [React Native佈局詳細指南](https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%E5%B8%83%E5%B1%80/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/React%20Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97.md)

### **flexbox sample，可自行修改參數看結果**

* [RN官方](https://facebook.github.io/react-native/docs/flexbox.html)
* [React Native Express](http://www.reactnativeexpress.com/flexbox)

\
以下是Web版，所以要注意一下Web Css和React Native中Flexbox的差異。 [Flexbox 塔防小遊戲](http://www.flexboxdefense.com/) [Flexbox 青蛙小遊戲](http://flexboxfroggy.com/)

### **RN和Web中的Flexbox不同之處**

* 各個參數名:例如在RN中是justifyCotent，在web css中是justify-cotent
* flexDirection:RN中預設是'column'，Web css預設是'row'
* flex:相比web css的flex接受多參數，例如flex:2 2 10%;，但在RN中flex只接受一個參數

### 參考

* [Web css Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
* [Using CSS Flexible Boxes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
* [react native佈局篇](https://segmentfault.com/a/1190000002658374#articleHeader0)