React Native的FlexBox布局
彈性盒模型（The Flexible Box Module,又叫Flexbox，意為“彈性布局”，旨在通過彈性的方式來對齊和分布容器中內容的空間，使其能適應不同屏幕，為盒裝模型提供最大的靈活性。
Flex布局主要思想是：讓容器有能力讓其子項目能夠改變其寬度、高度（甚至是順序），以最佳方式填充可用空間；
React native中的FlexBox是這個規范的一個子集。
flexbox布局是伸縮容器（container）和伸縮項目（item）組成
Flexbox布局的主體思想是元素可以改變大小以適應可用空間，當可用空間變大，flex元素伸展大小以填充可用空間，當Flex元素超出可用空間將自動縮小。總之，Flex元素是可以讓你的布局根據瀏覽器的大小變化進行自動伸縮。
Flex布局的思想
在CSS中，常規的布局是基于塊和內聯流方向，而Flex布局是基于flex-flow流,下圖很好解釋了Flex布局的思想
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列，單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
根據伸縮項目排列方式的不同，主軸和側軸方向也有所變化
Flexbox的常用屬性
伸縮容器的屬性
flexDirection: row | row-reverse | column | column-reverse
該屬性決定主軸的方向（即項目的排列方向）。
row：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column(默認值)：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
圖片.png
justifyContent:flex-start | flex-end | center | space-between | space-around
定義了伸縮項目在主軸線的對齊方式
flex-start(默認值)：伸縮項目向一行的起始位置靠齊。
flex-end：伸縮項目向一行的結束位置靠齊。
center：伸縮項目向一行的中間位置靠齊。
space-between：兩端對齊，項目之間的間隔都相等。
space-around：伸縮項目會平均地分布在行里，兩端保留一半的空間。
圖片.png
alignItems: flex-start | flex-end | center | baseline | stretch
定義項目在交叉軸上如何對齊，可以把其想像成側軸（垂直于主軸）的“對齊方式”。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊 。
center：交叉軸的中點對齊。
baseline：項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度
flexWrap: nowrap | wrap | wrap-reverse
默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
nowrap(默認值)：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。（和wrap相反）
元素屬性
flex
“flex-grow”、“flex-shrink”和“flex-basis”三個屬性的縮寫， 其中第二個和第三個參數（flex-shrink、flex-basis）是可選參數。默認值為“0 1 auto”。 寬度 ＝ 彈性寬度 * ( flexGrow / sum( flexGorw ) )
alignSelf: “auto | flex-start | flex-end | center | baseline | stretch”
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
屬性列表
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
borderBottomWidth number
borderLeftWidth number
borderRightWidth number
borderTopWidth number
borderWidth number
bottom number
flex number
flexDirection enum('row', 'column')
flexWrap enum('wrap', 'nowrap')
height number
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
left number
margin number
marginBottom number
marginHorizontal number
marginLeft number
marginRight number
marginTop number
marginVertical number
padding number
paddingBottom number
paddingHorizontal number
paddingLeft number
paddingRight number
paddingTop number
paddingVertical number
position enum('absolute', 'relative')
right number
top number
width number
