ReactNative之Flex佈局總結
從二月份開始學習ReactNative到現在已經有兩個月了，零碎的記錄了很多筆記，一直想寫一些ReactNative相關的東西，奈何感覺自己學習的還比較淺陋，而且筆記比較雜亂，不知從何而起，所以遲遲沒有動筆。清明三天假，決定無論如何都得整一篇出來。本來是想整一篇ReactNative佈局篇的，但是看看那麼多佈局屬性，自己對CSS又不是特別熟悉，佈局篇從何談起？所以，專門拿出ReactNative中佈局比較重要的一個點Flex佈局來做下總結，算是開啓ReactNative篇章。
Flex是Flexible Box的縮寫，意爲“彈性佈局”，2009年它由W3C提出了一種新的網頁佈局方案。而FaceBook將這個佈局也應用到React和ReactNative兩個項目當中。而在ReactNative當中，網頁的有些屬性和屬性的值並不支持，下面來看看ReactNative當中支持的屬性。（如果對於Flex佈局不太瞭解的同學，可以看看Flex 佈局教程：語法篇）
一、容器屬性：
ReactNative支持的容器屬性有flexDirection、flexWrap、justifyContent和alignItems。
1、 flexDirection屬性
flexDirection屬性決定了主軸的方向，它有兩個值：
row: 主軸爲水平方向，起點在左端
column: 主軸爲垂直方向，起點在頂部
2、flexWrap屬性
flexWrap屬性定義一條軸線排不下時是否折行。它有兩個值，分別是’wrap’和’nowrap’，分別代表支持換行和不支持換行，默認是’nowrap’。
nowrap 默認值。規定靈活的項目不拆行或不拆列。
wrap 規定靈活的項目在必要的時候拆行或拆列。
3、justifyContent屬性
主軸的對齊方式，默認爲’flex-start’，它的值有五個：
flex-start：主軸起點對齊
flex-end：主軸終點
center：居中
space-between：兩端對齊，項目之間的間隔都相等
space-around: 每個項目兩側的間隔相等。項目之間的間隔比項目與邊框的間隔大一倍。
4、alignItems屬性
交叉軸的對齊方式，默認爲’stretch’，它有四個值：
flex-start: 交叉軸的起點對齊
flex-end: 交叉軸的終點對齊
center: 交叉軸的中心對齊
stretch: 容器中的所有項目拉伸填滿整個容器
二、項目屬性
1、flex屬性
是否讓當前的視圖儘量佔用更大的空間，這個屬性可能使項目屬性justifyContent失效。有兩個值0和1，0代表否，1代表是，默認爲0。
2、alignSelf屬性
允許單個項目在交叉軸方向上與其他項目不一樣的對齊方式，可覆蓋alignItems屬性，它的值有五個，除了’auto’，其他都與alignItem屬性完全一致，默認爲’auto’。
後話
在剛開始接觸ReactNative的時候，對於我這麼一個從未有過前端開發的iOS開發程序員，兩個地方直接讓我懵了，一是裏面的語法，另外一個就是Flex佈局。佈局當中其它例如bottom、left、margin等等屬性都能從字面意思理解，而Flex佈局，確實是從沒見過的東西，不理解裏面的概念根本沒法用。好在找到了阮一峯老師的Flex 佈局教程：語法篇的這篇文章，快速的掌握了Flex佈局。
在這幾天ReactNative的開發當中，越發覺得Flex佈局的重要性，能將上面的屬性全部理解清楚的話，並且靈活使用，必然會讓ReactNative開發之旅更加得心應手。