Flexbox在React和React Native中都是非常重要的布局方式涎劈。
需要注意的是最冰，F(xiàn)lexbox有主軸側(cè)軸的概念。在網(wǎng)上上默認(rèn)的主軸是橫軸澄成，而手機上默認(rèn)的是縱軸。在實際開發(fā)中畏吓，容器的主側(cè)軸是可以改變的墨状。
在React中，F(xiàn)lexbox有6種容器屬性菲饼，6種項目屬性歉胶。而在React Native中，有4個容器屬性巴粪，2個項目屬性，分別是：
容器屬性：flexDirection ??flexWrap ??justifyContent ?alignItems
項目屬性：flex ?alignSelf
下面一一介紹：
（1）flexDirection
flexDiection屬性取兩個值：row粥谬，column;默認(rèn)的是column肛根。
row代表橫向拉伸，column代表縱向拉伸漏策。實際起到的作用就是決定內(nèi)部項目的主軸方向
（2）flexWrap
子元素超出父容器時是否換行,取值有兩種：wrap,nowrap派哲。默認(rèn)是nowrap
布局方向設(shè)置為橫向，父容器的橫向的寬度有300掺喻，但是兩個子component的寬度加起來是400芭届，如果不換行，第二個控件就會超出了感耙。
如果設(shè)置成wrap褂乍，效果如下：
（3）justifyContent
justifyContent定義了項目在主軸上的對齊方式,注意，這個主軸是受flexDirection影響的即硼。它跟alignItems是一樣的逃片，不同的是align-items的軸是跟justifyContent反著的，下面有介紹alignItems只酥。
取值如下：flex-start,flex-end,center,space-between,space-around
(4)alignItems
justifyContent定義了項目在側(cè)軸上的對齊方式褥实。
取值如下：flex-start,flex-end,center,stretch
flex-start：彈性盒子元素的側(cè)軸起始位置的邊界緊靠住該行的側(cè)軸起始邊界呀狼。
flex-end：彈性盒子元素的側(cè)軸起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸上居中放置损离。（如果該行的尺寸小于彈性盒子元素的尺寸哥艇，則會向兩個方向溢出相同的長度）。
stretch：如果指定側(cè)軸大小的屬性值為'auto'僻澎，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸貌踏，但同時會遵照'min/max-width/height'屬性的限制。
（5）flex
當(dāng)一個(元素)組件怎棱，定義了flex屬性時哩俭，表示該元素是可伸縮的,伸縮的方向與主軸方向一致。當(dāng)然flex的屬性值是大于0的時候才伸縮拳恋，其小于和等于0的時候不伸縮凡资，例如：flex:0, flex:-1等。上面的代碼谬运，最外層的view是可伸縮的隙赁，因為沒有兄弟節(jié)點和它搶占空間。里層是3個view,可以看到三個view的flex屬性加起來是5+5+10=20,所以第一個view和第二個view分別占1／4伸縮空間梆暖， 最后一個view占據(jù)1／2空間伞访，具體如下圖：
（6）alignSelf
alignSelf屬性會覆蓋容器的alignItems屬性，取值和用法alignItems一樣轰驳。
alignSelf的取值有五種：'auto', 'flex-start', 'flex-end', 'center', 'stretch'
auto：如果'align-self'的值為'auto'厚掷，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素级解，則計算值為'stretch'冒黑。
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界勤哗。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置抡爹。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）芒划。
stretch：如果指定側(cè)軸大小的屬性值為'auto'冬竟，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制民逼。
我們在實際開發(fā)中泵殴，容器已經(jīng)定義了側(cè)軸的布局方式，但是某個Component的位置比較特殊缴挖，跟別的不一樣袋狞，那么就利用alignSelf去改變自己的位置。在下面這張圖中，父容器已經(jīng)定了alignItems為center苟鸯，按道理說內(nèi)部Component在側(cè)軸上居中顯示同蜻。而在子Component定義了alignSelf為flex-start，代表與側(cè)軸start對齊早处，所以最終的結(jié)果如模擬器所示
