一：什么是FlexBox布局?
彈性盒模型（The Flexible Box Module）,又叫Flexbox馆揉，意為“彈性布局”吭敢，旨在通過彈性的方式來對(duì)齊和分布容器中內(nèi)容的空間汞幢，使其能適應(yīng)不同屏幕立帖，為盒裝模型提供最大的靈活性。
Flex布局主要思想是：讓容器有能力讓其子項(xiàng)目能夠改變其寬度舆逃、高度（甚至是順序）庄撮，以最佳方式填充可用空間；
容器默認(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亚铁。
二：容器屬性：
ReactNative支持的容器屬性有flexDirection、flexWrap螟加、justifyContent和alignItems徘溢。
1、 flexDirection屬性
flexDirection屬性決定了主軸的方向捆探，它有兩個(gè)值：
row: 主軸為水平方向然爆，起點(diǎn)在左端
column: 主軸為垂直方向，起點(diǎn)在頂部
2黍图、flexWrap屬性
flexWrap屬性定義一條軸線排不下時(shí)是否折行曾雕。它有兩個(gè)值，分別是’wrap’和’nowrap’助被，分別代表支持換行和不支持換行剖张，默認(rèn)是’nowrap’切诀。
3、justifyContent屬性
主軸的對(duì)齊方式搔弄，默認(rèn)為’flex-start’幅虑，它的值有五個(gè)：
flex-start：主軸起點(diǎn)對(duì)齊
flex-end：主軸終點(diǎn)
center：居中
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等
space-around: 每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等肯污。項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍翘单。
4、alignItems屬性
交叉軸的對(duì)齊方式蹦渣，默認(rèn)為’stretch’哄芜，它有四個(gè)值：
flex-start: 交叉軸的起點(diǎn)對(duì)齊
flex-end: 交叉軸的終點(diǎn)對(duì)齊
center: 交叉軸的中心對(duì)齊
stretch: 容器中的所有項(xiàng)目拉伸填滿整個(gè)容器
三：?元素屬性
1）flex
“flex-grow”、“flex-shrink”和“flex-basis”三個(gè)屬性的縮寫柬唯， 其中第二個(gè)和第三個(gè)參數(shù)（flex-shrink认臊、flex-basis）是可選參數(shù)。
默認(rèn)值為“0 1 auto”锄奢。
寬度 ＝ 彈性寬度 * ( flexGrow / sum( flexGorw ) )
2）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灰伟。
3）屏幕寬高獲取
var Dimensions =require('Dimensions');
let {width, height, scale} = Dimensions.get("window");
