一.簡介

我們在React Native中使用flexbox規(guī)則來指定某個組件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局結構。
Flexbox布局的主體思想是元素可以改變大小以適應可用空間，當可用空間變大，F(xiàn)lex元素將伸展大小以填充可用空間，當Flex元素超出可用空間時將自動縮小?？傊?，F(xiàn)lex元素是可以讓你的布局根據(jù)瀏覽器的大小變化進行自動伸縮。伸縮容器有主軸和交叉軸組成！ 主軸既可以是水平軸，也可以是垂直軸。

二.屬性 （最常用的是前三個）

• alignItems

可以決定其子元素沿著次軸（與主軸垂直的軸，比如若主軸方向為row，則次軸方向為column）的排列方式，語法為：
alignItems: flex-start（默認值） | flex-end | center | stretch

注意：要使stretch選項生效的話，子元素在次軸方向上不能有固定的尺寸。

• justifyContent

可以決定其子元素沿著主軸的排列方式。語法為：
justifyContent: flex-start、center、flex-end、space-around以及space-between

• flexDirection

可以決定布局的主軸，默認是豎軸。語法為：
flexDirection: column（默認值） | row | row-reverse | column-reverse

• alignSelf
  用來設置單獨的伸縮項目在交叉軸上的對齊方式，會覆蓋默認的對齊方式。語法為：
  alignSelf: auto | flex-start | flex-end | center | stretch(伸縮項目在交叉軸方向占滿伸縮容器，如果交叉軸為垂直方向的話，只有在不設置高度的情況下才能看到效果)
• flex
  是flex-grow flex-shrink flex-basis這三個屬性的縮寫，其語法為：
  flex: none | flex-grow flex-shrink flex-basis，其中第二個和第三個參數(shù)為可選參數(shù)，默認值為：0 1 auto