介紹
flexbox是一個新的盒子模型，當你給一個元素使用了flexbox模塊，那么它的子元素就會指定的方向在水平或者縱向方向排列。這些子元素會按照一定的比例進行擴展或收縮來填補容器的可用空間。
Flex容器
圖中main axis和cross saxis分別為當前flex container的橫豎軸，主軸main axis并不一定是水平的，而是由flexDirection決定，當flexDirection為column時才是水平的。
flexline這個屬性值得一提。當flex布局時，一行容納不下所有的flexitem時需要換行，這時每一行則為1個flexline。
盒模型
ReactNative中的flex是CSS中盒狀模型的子集，因此在ReactNative中也可以使用盒模型屬性進行布局：
容器屬性
1. flexDirection
flexDirection屬性決定主軸(main axix)的方向。ReactNative中flexDirection默認值為column，并且不支持row-reverse和column-reverse。
flexDirection: enum("column", "row")
2. flexWarp
flexWrap屬性決定是否自動折行。
flexWrap enum('wrap', 'nowrap')
3. justifyContent
justifyContent屬性主要作用于main axis，決定主軸上所有flex item的對齊方式。
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
4. alignItems
alignItems屬性主要作用于cross axis，決定垂直主軸上所有flex item的對齊方式。
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
5. alignSelf
alignSelf屬性主要作用于某個flex item，決定當前flex item垂直主軸上的對齊方式。
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
6. flex
flex屬性決定主軸上flex item間的比例。如果設置flex為0則表示盡量小。
寬度＝彈性寬度*(當前flex/sum(flexs))
單位問題
在ReactNative中使用flex進行布局時，我們通常會設置一些標簽為固定大小。這時我們設置的寬度或者高度等不需要帶單位，默認使用 pt 為單位。另外在ReactNative中，我們 不能使用百分比 來進行設置我們需要的大小數值，但我們可以通過 Dimenssions 和 PixelRatio 模塊來獲取窗口寬高和像素密度。
示例如下：
var dimensions = require('Dimensions'); var { width, height, } = dimensions.get('window');
var pixelRatio = PixelRatio.get();
ReactNative也支持一些其它工具方法來幫助我們獲取需要的數值
例如：getPixelSizeForLayoutSize(); getFontScale();
