一.簡(jiǎn)介
我們?cè)赗eact Native中使用flexbox規(guī)則來(lái)指定某個(gè)組件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局結(jié)構(gòu)蟀给。
Flexbox布局的主體思想是元素可以改變大小以適應(yīng)可用空間蝙砌，當(dāng)可用空間變大，F(xiàn)lex元素將伸展大小以填充可用空間跋理，當(dāng)Flex元素超出可用空間時(shí)將自動(dòng)縮小择克。總之前普，F(xiàn)lex元素是可以讓你的布局根據(jù)瀏覽器的大小變化進(jìn)行自動(dòng)伸縮肚邢。伸縮容器有主軸和交叉軸組成！ 主軸既可以是水平軸拭卿，也可以是垂直軸骡湖。
二.屬性 （最常用的是前三個(gè)）
-
alignItems
可以決定其子元素沿著次軸（與主軸垂直的軸，比如若主軸方向?yàn)閞ow峻厚，則次軸方向?yàn)閏olumn）的排列方式响蕴，語(yǔ)法為：
alignItems: flex-start（默認(rèn)值） | flex-end | center | stretch
注意：要使stretch選項(xiàng)生效的話，子元素在次軸方向上不能有固定的尺寸惠桃。
-
justifyContent
可以決定其子元素沿著主軸的排列方式浦夷。語(yǔ)法為：
justifyContent: flex-start、center辜王、flex-end劈狐、space-around以及space-between
-
flexDirection
可以決定布局的主軸，默認(rèn)是豎軸呐馆。語(yǔ)法為：
flexDirection: column（默認(rèn)值） | row | row-reverse | column-reverse
- alignSelf
用來(lái)設(shè)置單獨(dú)的伸縮項(xiàng)目在交叉軸上的對(duì)齊方式懈息，會(huì)覆蓋默認(rèn)的對(duì)齊方式。語(yǔ)法為：
alignSelf: auto | flex-start | flex-end | center | stretch(伸縮項(xiàng)目在交叉軸方向占滿伸縮容器摹恰，如果交叉軸為垂直方向的話辫继，只有在不設(shè)置高度的情況下才能看到效果) - flex
是flex-grow flex-shrink flex-basis這三個(gè)屬性的縮寫怒见，其語(yǔ)法為：
flex: none | flex-grow flex-shrink flex-basis，其中第二個(gè)和第三個(gè)參數(shù)為可選參數(shù)姑宽，默認(rèn)值為：0 1 auto
