首先需要了解H5中盒子模型的flex-box的屬性，其可以分為伸縮容器屬性和伸縮Item屬性

伸縮容器的屬性

1. display 設(shè)置容器為行內(nèi)還是塊級標(biāo)簽
語法為：display：flex | inline-flex

flex : 塊級伸縮容器，默認(rèn)值
inline-flex : 行內(nèi)伸縮容器

2. flex-direction
指定主軸方向。
語法為：flex-direction：row(從左到右，默認(rèn)值) | row-reverse(從右到左) | column(從上到下) | column-reverse(從下到上)

3. flex-wrap
伸縮容器在主軸方向空間不夠的情況下，是否換行，以及如何換行
語法為：flex-wrap：nowrap(不換行，默認(rèn)值) | wrap(向下?lián)Q行) | wrap-reverse(向上換行)

4. flex-flow
是 flex-direction 和 flex-wrap 的縮寫方式
語法為：flex- flow：row nowrap (默認(rèn)值) | （其他的自行組合）

5. justify-content
用來定義伸縮容器在主軸方向上的對齊方式。
語法為：justify-content：flex-start(從左到右,默認(rèn)值) | flex-end(從右到左) | center(水平居中) | space-between(平均分布在主軸方向上，每個item中間的距離相等，第一個item和作后一個item挨著容器) | space-around(平均分布在主軸方向上，第一個item和作后一個item距離容器的距離是其他itme之間距離的一半)

justify-content.png

6. align-items
用來定義伸縮容器在交叉軸方向上的對齊方式。
語法為：align-items：flex-start(從上到下,默認(rèn)值) | flex-end(從下到上) | center(垂直居中) | baseline(基準(zhǔn)線) | stretch(上下伸縮)

align-item.jpg

7. align-content
用來定義伸縮容器在交叉軸方向上的對齊方式。
語法為：align-items：flex-start(從上到下,默認(rèn)值) | flex-end(從下到上) | center(垂直居中) | space-between(平均分布在交叉軸方向上，每個item中間的距離相等，第一個item和作后一個item挨著容器) | space-around(平均分布在交叉軸方向上，第一個item和作后一個item 距離容器的距離是其他itme之間距離的一半) | stretch(默認(rèn)值)

伸縮Itme的屬性

1. order
定義項(xiàng)目的排列順序，數(shù)值越小排列越靠前，默認(rèn)值為0 ；
語法為：order：整數(shù)值

2. flex-grow
定義項(xiàng)目的放大比例，默認(rèn)值為0，表示存在剩余空間也不放大。
語法為：flex-grow：整數(shù)值 ；例如三個div的flex-grow分別為（1,2,1），那么放大比例也是1：2：1

3. flex-shrink
定義項(xiàng)目的收縮比例，默認(rèn)值為1，表示剩余空間不足的情況下才會縮小。
語法為：flex-shrink：整數(shù)值；例如三個div的flex-shrink分別為（1,2,1），那么縮小比例也是1：2：1

4. flex-basis
用來設(shè)置項(xiàng)目的基準(zhǔn)值，剩余的空間按比率進(jìn)行伸縮。
語法為：flex-basis：length | auto 默認(rèn)值為auto

5. flex
是flex-grow flex-shrink flex-basis這三個屬性的縮寫。
語法為：flex：none | flex-grow flex-shrink flex-basis第二和第三個參數(shù)可先，默認(rèn)值： 0 1 auto

6. align-self
用來設(shè)置單獨(dú)的交叉軸上的對齊方式，會覆蓋默認(rèn)的對齊方式。
語法為：align-self：auto | flex-start | flex-end | center | baseline | stretch（伸縮項(xiàng)目在交叉軸方向沾滿容器，如果交叉軸為垂直方向，只有在不設(shè)置高度的情況下才能看到效果）

ReactNative 使用到的相關(guān)屬性

1. justityContent
用來定義伸縮容器在主軸方向上的對齊方式。
語法為：justifyContent：flex-start(從左到右,默認(rèn)值) | flex-end(從右到左) | center(水平居中) | space-between(平均分布在主軸方向上，每個item中間的距離相等，第一個item和作后一個item挨著容器) | space-around(平均分布在主軸方向上，第一個item和作后一個item距離容器的距離是其他itme之間距離的一半)

2. alignItem
用來定義伸縮容器在交叉軸方向上的對齊方式。
語法為：alignItems：flex-start(從上到下,默認(rèn)值) | flex-end(從下到上) | center(垂直居中) | stretch(上下伸縮)

3.flexDirection
指定主軸方向。
語法為：flexDirection：row(從左到右，默認(rèn)值) | row-reverse(從右到左) | column(從上到下) | column-reverse(從下到上)

4. flexWrap
伸縮容器在主軸方向空間不夠的情況下，是否換行，以及如何換行。
語法為：flexWrap：nowrap(不換行，默認(rèn)值) | wrap(向下?lián)Q行) | wrap-reverse(向上換行)

5. alignSelf
用來設(shè)置單獨(dú)的交叉軸上的對齊方式，會覆蓋默認(rèn)的對齊方式。
語法為：alignSelf：auto | flex-start | flex-end | center | stretch
（伸縮項(xiàng)目在交叉軸方向沾滿容器，如果交叉軸為垂直方向，只有在不設(shè)置高度的情況下才能看到效果）

6. flex
是flex-grow flex-shrink flex-basis這三個屬性的縮寫。
語法為：flex：none | flex-grow flex-shrink flex-basis 第二和第三個參數(shù)可先，默認(rèn)值： 0 1 auto