什么是FlexBox布局?
彈性盒模型（The Flexible Box Module）,又叫Flexbox鸥昏，意為“彈性布局”契讲，旨在通過彈性的方式來對(duì)齊和分布容器中內(nèi)容的空間，使其能適應(yīng)不同屏幕料祠，為盒裝模型提供最大的靈活性贾漏。
Flex布局主要思想是：讓容器有能力讓其子項(xiàng)目能夠改變其寬度橙弱、高度（甚至是順序），以最佳方式填充可用空間钞脂；
Flexbox在布局中能夠解決什么問題揣云？
浮動(dòng)布局
各種機(jī)型屏幕的適配
水平和垂直居中
自動(dòng)分配寬度
......
Flex布局基于flex-flow流
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和** 垂直的交叉軸（cross axis）**。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start冰啃，結(jié)束位置叫做main end邓夕；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end阎毅。
項(xiàng)目默認(rèn)沿主軸排列焚刚，單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size扇调。
Flexbox的常用屬性
** 1. 容器屬性 **
** flexDirection: row | row-reverse | column | column-reverse **
該屬性決定主軸的方向（即項(xiàng)目的排列方向）矿咕。
row：主軸為水平方向，起點(diǎn)在左端狼钮。
row-reverse：主軸為水平方向碳柱，起點(diǎn)在右端。
column(默認(rèn)值)：主軸為垂直方向燃领，起點(diǎn)在上沿士聪。
column-reverse：主軸為垂直方向锦援，起點(diǎn)在下沿猛蔽。
** justifyContent:flex-start | flex-end | center | space-between | space-around**
定義了伸縮項(xiàng)目在主軸線的對(duì)齊方式
flex-start(默認(rèn)值)：伸縮項(xiàng)目向一行的起始位置靠齊。
flex-end：伸縮項(xiàng)目向一行的結(jié)束位置靠齊灵寺。
center：伸縮項(xiàng)目向一行的中間位置靠齊曼库。
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等略板。
space-around：伸縮項(xiàng)目會(huì)平均地分布在行里毁枯，兩端保留一半的空間。
** alignItems: flex-start | flex-end | center | baseline | stretch**
定義項(xiàng)目在交叉軸上如何對(duì)齊叮称，可以把其想像成次軸（垂直于主軸）的“對(duì)齊方式”种玛。
flex-start：交叉軸的起點(diǎn)對(duì)齊。
flex-end：交叉軸的終點(diǎn)對(duì)齊 瓤檐。
center：交叉軸的中點(diǎn)對(duì)齊赂韵。
baseline：項(xiàng)目的第一行文字的基線對(duì)齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto挠蛉，將占滿整個(gè)容器的高度祭示。
** flexWrap: nowrap | wrap | wrap-reverse**
默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上谴古。flex-wrap屬性定義质涛，如果一條軸線排不下稠歉，如何換行。
nowrap(默認(rèn)值)：不換行汇陆。
wrap：換行怒炸，第一行在上方。
wrap-reverse：換行瞬测，第一行在下方横媚。（和wrap相反）
** 2. 元素屬性**
** flex **
“flex-grow”、“flex-shrink”和“flex-basis”三個(gè)屬性的縮寫月趟， 其中第二個(gè)和第三個(gè)參數(shù)（flex-shrink灯蝴、flex-basis）是可選參數(shù)。
默認(rèn)值為“0 1 auto”孝宗。
寬度 ＝ 彈性寬度 * ( flexGrow / sum( flexGorw ) )
這里我找了個(gè)圖穷躁，可能會(huì)好理解一些
20151001110223899.jpeg
** alignSelf:auto | flex-start | flex-end | center | baseline | stretch **
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性因妇。默認(rèn)值為auto问潭，表示繼承父元素的align-items屬性，如果沒有父元素婚被，則等同于stretch狡忙。
flex-start：交叉軸的起點(diǎn)對(duì)齊。
flex-end：交叉軸的終點(diǎn)對(duì)齊 址芯。
center：交叉軸的中點(diǎn)對(duì)齊灾茁。
baseline：項(xiàng)目的第一行文字的基線對(duì)齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto谷炸，將占滿整個(gè)容器的高度北专。
在React Native中使用Flexbox
** 獲取當(dāng)前屏幕的寬度旬陡、高度拓颓、分辨率 **
import Dimensions from 'Dimensions';
var { width, height, scale } = Dimensions.get('window');
render() {
return (
<View>
<Text>
屏幕的寬度：{width + '\n'}
屏幕的高度：{height + '\n'}
屏幕的分辨率：{scale + '\n'}
</Text>
</View>
);
}
** 絕對(duì)定位和相對(duì)定位 **
與css定位不同，在React Native中定位不需要再父組件中設(shè)置position屬性描孟。
通常情況下設(shè)置position和absolute匿醒，定位的效果是一樣的，但是如果父組件設(shè)置了內(nèi)邊距旗闽，position會(huì)做出相應(yīng)的定位改變适室，而absolute則不會(huì)。
** 默認(rèn)寬度 **
我們都知道塊級(jí)標(biāo)簽如果不設(shè)置寬度汽畴，通常都是獨(dú)占一行的忍些，在React Native中的組件中需要設(shè)置flexDirection：'row'廓握，才能在同一行顯示隙券，flex的元素如果不設(shè)置寬度娱仔，都會(huì)百分之百的占滿父容器众弓。
水平隔箍、垂直居中
當(dāng)alignItems、justifyContent傳center時(shí)與flexDirection的關(guān)系：
QQ20160815-0.png
想理解這個(gè)很簡(jiǎn)單捡遍，看我上班講的alignItems、justifyContent蜈项，心里想著主軸和次軸就可以理解诗祸，justifyContent是主軸方向居中，而alignItems是次軸方向居中博个，flexDirection默認(rèn)為column罪塔，所以誤區(qū)會(huì)認(rèn)為alignItems為水平居中，justifyContent為垂直居中关拒。
padding和margin
這里就不累贅啦着绊，具體和css用法是一樣的
參考鏈接：http://www.w3cplus.com/css3/a-guide-to-flexbox.html
