? ? ? ??Flex是React-Native中重要的布局手段之一莉钙。在組件樣式中使用flex可以使其在可利用的空間中動(dòng)態(tài)地?cái)U(kuò)張或收縮苛茂。一般而言我們會(huì)使用flex:1來指定某個(gè)組件擴(kuò)張以撐滿所有剩余的空間。如果有多個(gè)并列的子組件使用了flex:1鉴扫，則這些子組件會(huì)平分父容器中剩余的空間赞枕。如果這些并列的子組件的flex值不一樣，則誰的值更大坪创，誰占據(jù)剩余空間的比例就更大（即占據(jù)剩余空間的比等于并列組件間flex值的比）炕婶。
? ? ? ? 換句話說，控件可以使用flex進(jìn)行布局莱预，是相對(duì)父類控件的一個(gè)伸縮比例的布局柠掂。如：
? ?<View style={{flex: 1}}>
? ? ? ? <View style={{flex: 1, backgroundColor: 'powderblue'}} />
? ? ? ? <View style={{flex: 2, backgroundColor: 'skyblue'}} />
? ? ? ? <View style={{flex: 3, backgroundColor: 'steelblue'}} />
? ? </View>
即，最外層view的樣式設(shè)置為{flex: 1}依沮，這層view就會(huì)擴(kuò)充整個(gè)父類view涯贞。里層三個(gè)View枪狂，假如三個(gè)view設(shè)置的flex:都為1的話，那里層三個(gè)view就會(huì)三等分撐滿外層view的空間宋渔。如上州疾，flex分別為1、2皇拣、3严蓖，則這三個(gè)view的高度比例為1/6，1/3氧急，1/2颗胡。
????????Flex Direction
? ??????在組件的style中指定flexDirection可以決定布局的主軸。子元素是應(yīng)該沿著水平軸(row)方向排列吩坝，還是沿著豎直軸(column)方向排列呢毒姨？默認(rèn)值是豎直軸(column)方向（所以上面代碼三個(gè)內(nèi)層view就是豎直軸方向排列的，所以主要比例是高度的比例）钉寝。 如： ? ??
? ? ? ? 即在view中定義樣式flexDirection的屬性弧呐，其子元素（如上，內(nèi)層view）的布局瘩蚪，為橫向布局泉懦。
? ??????Justify Content
? ??????在組件的 style 中指定justifyContent可以決定其子元素沿著主軸的排列方式。子元素是應(yīng)該靠近主軸的起始端還是末尾端分布呢疹瘦？亦或應(yīng)該均勻分布崩哩？對(duì)應(yīng)的這些可選項(xiàng)有：flex-start、center言沐、flex-end邓嘹、space-around、space-between以及space-evenly险胰。flex-start表示靠近主軸起始端分布汹押，center為居中分布，flex-end表示靠近主軸末尾端分布起便，space-around為主軸兩邊邊上有間距的分布棚贾。space-between主軸兩邊邊上無間距的分布，space-evenly為主軸方向均勻分布榆综，相鄰間距與首尾間距相等妙痹。
????????Align Items
? ??????在組件的 style 中指定alignItems可以決定其子元素沿著次軸（與主軸垂直的軸，比如若主軸方向?yàn)閞ow鼻疮，則次軸方向?yàn)閏olumn）的排列方式怯伊。子元素是應(yīng)該靠近次軸的起始端還是末尾段分布呢？亦或應(yīng)該均勻分布判沟？對(duì)應(yīng)的這些可選項(xiàng)有：flex-start耿芹、center崭篡、flex-end以及stretch。flex-start為靠起始端分布吧秕，center為靠中間位置分布琉闪，flex-end靠末尾端分布，stretch表示次軸方向拉伸砸彬。
注意：要使stretch選項(xiàng)生效的話塘偎，子元素在次軸方向上不能有固定的尺寸。以下面的代碼為例：只有將子元素樣式中的width: 50去掉之后拿霉，alignItems: 'stretch'才能生效。
? ? ? ? flexDirection為“column”咱扣，即主軸的排列方式為豎直方向绽淘，次軸為橫向方向。justifyContent為“center”闹伪，表示子元素沿著主軸（即豎直方向）居中沪铭。?alignItem為“stretch”，表示沿著次軸拉伸偏瓤。如圖杀怠，第一個(gè)view因?yàn)楣潭舜屋S上的尺寸，所以‘stretch’不能生效厅克，即沒有鋪滿次軸赔退，第二第三都鋪滿了次軸了。
