Flexbox布局樣式

Flexbox布局樣式 ReactNative是參考文檔大于0.29的版本

參考連結

1. 6個屬性設定在容器上

1.1 任何一個容器都可以指定為Flex布局。ReactNative無

display: flex;

display: inline-flex; //行内元素也可以使用Flex布局。

1.2

flex-direction

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

flex-direction: row(預設值) | row-reverse | column | column-reverse

;

ReactNative 中的

flexDirection

:

column

(預設值) |

column-reverse

|

row

|

row-reverse

;

1.3

flex-wrap

換行

flex-wrap: nowrap | wrap | wrap-reverse

;

ReactNative 中的

flexWrap

:

nowrap

|

wrap

;

1.4

flex-flow

flex-direction 和flex-wrap 的簡寫 ReactNative無

flex-flow : row || nowrap

;

1.5 justify-content 水準排列方式

justify-content: flex-start | flex-end | center | space-between | space-around

;

ReactNative中的

justifyContent: flex-start | flex-end | center | space-between | space-around

;

1.6 align-items 垂直排列方式

align-items: flex-start | flex-end | center | baseline | stretch

;

ReactNative中的

alignItems: flex-start | flex-end | center | stretch

;

2. 容器中項目的屬性

2.1 order ReactNative無

order :<number>

; 屬性定義項目的排列順序。數值越小，排列越靠前，預設為0。

2.2 flex-grow ReactNative無

flex-grow:<number>

; 屬性定義項目的放大比例，預設為0，即如果存在剩餘空間，也不放大。如果所有項目的flex-grow屬性都為1，則它們将等分剩餘空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩餘空間将比其他項多一倍。

2.3 flex-shrink ReactNative無

flex-shrink: ; 屬性定義了項目的縮小比例，預設為1，即如果空間不足，該項目将縮小。flex-basis

2.4 flex-basis ReactNative無

2.5 flex ReactNative無

2.6 align-self

align-self: auto | flex-start | flex-end | center | baseline | stretch

;

ReactNative中的

alignSelf: auto | flex-start | flex-end | center | stretch

;

3. FlexBox布局目前支援React Native 的屬性

FlexBox布局目前支援React Native 的屬性有如下個：
() flex :number  大于的時候才可伸縮，按照大小顯示伸縮比例；
() flexDirection :column(容器設定的屬性:主軸方向預設－垂直方向，從上倒下)| `column-reverse` | row（水準方向，從左到右）| `row-reverse`；
() flexWrap :wrap(換行) －－nowrap(不換行)//容器設定的屬性
() alignItems :flex-start | flex-end | center | stretch (容器設定的屬性:伸縮項目在伸縮容器中的交叉軸的對齊方式)；
() justifyContent : flex-start | flex-end | center | space-between | space-aronud （容器設定的屬性:伸縮項目沿着垂直方向的對齊方式）；
() alignSelf : flex-start | flex-end | center | auto | stretch。（伸縮項目在交叉軸的對齊方式）；
() position : 'absolute' | 'relative' ;
() zIndex : number ;