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，可自行修改參數看結果

以下是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只接受一個參數

參考

Previous基礎元件NextFlatList

Last updated