前言
彈性盒模型（The Flexible Box Module），又叫FlexBox，意為“彈性布局”，旨在通過彈性的方式來對齊和分布容器中內容的空間，使其能適應不同的屏幕，為盒裝模型提供最大的靈活性。
FlexBox在大部分情況下都是處理Item在Container中位置和尺寸的關系。
FlexBox在布局中能解決很多問題，如浮動布局、屏幕適配、水平垂直居中、自動分配寬度等。
FlexBox布局屬性
flexDirection主軸方向：
flexDirection屬性用來設置主軸的方向，即視圖中子控件的排列順序，有如下幾種選項：
- column（默認值）：子控件從上向下排列；
- column-reverse：子控件從下向上排列；
- row：子控件從左向右排列；
- row-reverse：子控件從右向左排列。
justifyContent對齊方式：
justifyContent屬性用來設置伸縮項在主軸線的對齊方式，有如下幾種選項：
- flex-start（默認值）：向主軸方向的起始端靠齊；
- flex-end：向主軸方向的結尾端靠齊；
- center：向主軸中間靠齊；
- space-between：兩段靠齊，項之間間隔相等，主軸兩段沒有空隙；
- space-around：項平均的分布在主軸上，每個項的兩段都有空隙。
alignItems側軸對齊方式：
alignItems屬性用來設置伸縮項在側軸上的對齊方式（側軸永遠垂直於主軸），有如下幾種選項：
- stretch（默認值）：如果沒有設置項的高度或設置為auto，則項將占滿側軸；
- flex-start：向側軸方向的起始端靠齊；
- flex-end：向側軸方向的末尾端靠齊；
- center：向側軸的中間靠齊。
flexWrap流式布局樣式：
flexWrap屬性用來設置流式布局（當所有項不能顯示在一行中時，換行顯示）的樣式，有如下幾種選項：
- nowrap（默認值）：不換行；
- wrap：換行，新行在舊行下方；
- wrap-reverse：換行，新行在舊行上方。
注意：flexWrap屬性在iOS上可以正常設置，但在Android上如果不加額外的設置，則只會顯示第一行，解決方法是添加style：alignItems: ’flex-start’
FlexBox元素屬性
flex元素比重：
flex屬性是flex-grow、flex-shrink和flex-basis三個屬性的組合體，其中后兩個屬性是可選屬性。三個屬性具體解釋如下：
- flex-grow：元素占當前容器中的彈性寬度的比重，默認是0；
- flex-shrink：縮小元素的寬度，值越大縮的越小，默認值是1；
- flex-bisis：相當於CSS中的width屬性，默認值是auto。
元素在容器中的寬度/高度的計算公式：寬/高度 = 彈性寬度 * (flow-grow / sum(flow-grow));
alignSelf：
alignSelf屬性允許單個元素有與其他元素不一樣的對齊方式，有如下幾種選項：
- auto（默認值）：集成父容器的對齊方式，如果沒有父容器，則相當於stretch；
- flex-start：當前元素向父容器的起始端靠齊；
- flex-end：當前元素向父容器的結尾端靠齊；
- center：當前元素向父容器的中間靠齊；
- stretch：當前元素拉伸鋪滿父容器。
注意：alignSelf屬性相當於將父容器的alignItems屬性進行了覆蓋。
FlexBox其他方法
獲取當前屏幕的寬度（高度、分辨率使用同樣方法獲取）：
let Dimensions = require('Dimensions');
let width = Dimensions.get('window').width;
獲取當前屏幕的寬度、高度、分辨率：
let Dimensions = require('Dimensions');
let {width, height, scale} = Dimensions.get('window');
補充參考