4、手把手教React Native實戰之flexbox布局(伸縮屬性)

標籤：

###伸縮項目的屬性

1.order

定義項目的排列順序，數值越小，排列越靠前，預設值為0，文法為：order：整數值

2.flex-grow

定義伸縮項目的放大比例，預設值為0，即表示如果存在剩餘空間，也不放大，文法為：flex-grow：整數值

3.flex-shrink

定義伸縮項目的收縮能力，預設值為1 ，其文法為：flex-shrink:整數值

4.flex-basis

用來設定伸縮項目的基準值，剩餘的空間按比率進行伸縮，其文法為：flex-basis:length | auto，預設值為auto

5.flex

是flex-grow flex-shrink flex-basis這三個屬性的縮寫，其文法為：flex:none | flex-grow flex-shrink flex-basis，其中第二個和第三個參數為選擇性參數，預設值為：0 1 auto

6.align-self

用來設定單獨的伸縮項目在交叉軸上的對齊，會覆蓋預設的對齊，其文法為：align-self:auto | flex-start | flex-end | center | baseline | stretch(伸縮項目在交叉軸方向佔滿伸縮容器，如果交叉軸為垂直方向的話，只有在不設定高度的情況下才能看到效果)

###在React Native中使用flexbox

RN目前主要支援flexbox的如下6個屬性：

1.alignItems

用來定義伸縮項目在交叉軸上的對齊，文法為：
alignItems:flex-start（預設值） | flex-end | center | stretch

2.alignSelf

用來設定單獨的伸縮項目在交叉軸上的對齊，會覆蓋預設的對齊，其文法為：alignSelf:auto | flex-start | flex-end | center | stretch(伸縮項目在交叉軸方向佔滿伸縮容器，如果交叉軸為垂直方向的話，只有在不設定高度的情況下才能看到效果)

3.flex

是flex-grow flex-shrink flex-basis這三個屬性的縮寫，其文法為：flex:none | flex-grow flex-shrink flex-basis，其中第二個和第三個參數為選擇性參數，預設值為：0 1 auto

4.flexDirection

指定主軸的方向 flex-direction:row| row-reverse | column（預設值） | column-reverse

5.flexWrap

6.justifyContent



##4、配套視頻()：https://yunpan.cn/cYIG6dCUNIRkB  訪問密碼 d6b6

4、手把手教React Native實戰之flexbox布局(伸縮屬性)