Flexbox

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

• 運行在Android時，寬高等單位是dp，字體單位是sp

• 運行在iOS時，尺寸單位是pt

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

• main axis:主軸

• cross axis:交叉軸

• flex container:父容器

• flex item:子元素

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

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佈局詳解 React Native佈局詳細指南

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

• RN官方

• React Native Express

以下是Web版，所以要注意一下Web Css和React Native中Flexbox的差異。 Flexbox 塔防小遊戲 Flexbox 青蛙小遊戲

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

• Using CSS Flexible Boxes

• react native佈局篇