如下：

• 1恕曲、alignItems 伸縮項(xiàng)目在交叉軸上的對齊方式

        flex-start (默認(rèn)值）交叉軸上以開始位置對齊
        flex-end  交叉軸上已結(jié)束位置對齊
        center    交叉軸上以中間對齊
        stretch   已拉伸的效果展示
  

• 2、alignSelf 用來設(shè)置單獨(dú)的伸縮項(xiàng)目在交叉軸上的對齊方式渤涌。會覆蓋默認(rèn)的對齊方式佩谣。

        auto 
        flex-start
        flex-end
        center
        stretch   （如果交叉軸為垂直方向的話，只有在不設(shè)置高度的話歼捏，才能看到效果 ）（伸縮項(xiàng)目在交叉軸方向占滿容器）
  

• 3稿存、flex 是flex-grow 、 flex-shrink 瞳秽、flex-basis 這三個(gè)屬性的縮寫瓣履。其語法：

        flex:none | flex-grow  flex-shrink  flex-basis   ,其中第二個(gè)和第三個(gè)參數(shù)為可選參數(shù) ，默認(rèn)值為 ： 0,1 auto 
  

• 4练俐、flex-direction 主軸線的方向

         row 從左到右的方向
         row-reverse 相反的方向（從右刀左）
         column 從上到下的方向（默認(rèn)  手機(jī)嘛）
         column-reverse 從下到方向
  

• 5袖迎、flex-wrap

          wrap 自動換行
          norap 不管怎樣不換行
          wrap-reverse 自動換行 以反方向換
  

• 6、justify-content (在主軸線上的對齊方式)

            flex-start  左對齊（起始位置）
            flex-end 右對齊
            center 中間對齊
            space-between 平均分布在界面上
            space-around 中間的間距=兩邊的邊距相加
  

下面就是實(shí)戰(zhàn)了哦

flexDirection

flexDirection 在rn中默認(rèn)是從上到下排列的腺晾。

export default class AwesomeProject extends Component {
  render() {
    return (
      <View style={{backgroundColor:'red',margin:20}}>
            <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
                <Text style={{fontSize:16}}>1</Text>
            </View>
          <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
              <Text style={{fontSize:16}}>2</Text>
          </View>
          <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
              <Text style={{fontSize:16}}>3</Text>
          </View>
          <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
              <Text style={{fontSize:16}}>4</Text>
          </View>
      </View>
    );
  }
}

里面沒有定義 任何屬性 默認(rèn)是從上到下 flexDirection:'column' 效果圖為：

QQ截圖20170918224445.png

當(dāng)flexDirection:'column-reverse' 從下到上

QQ截圖20170918225541.png

當(dāng)flexDirection:'row' 從左到右的排列

QQ截圖20170918224903.png

當(dāng)flexDirection:'row-reverse' 從右到左的排列

QQ截圖20170918225043.png

下面放下 一個(gè)整體的代碼

export default class AwesomeProject extends Component {
  render() {
    return (
      <View style={{backgroundColor:'red',margin:20,flexDirection:'column-reverse'}}>
            <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
                <Text style={{fontSize:16}}>1</Text>
            </View>
          <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
              <Text style={{fontSize:16}}>2</Text>
          </View>
          <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
              <Text style={{fontSize:16}}>3</Text>
          </View>
          <View style={{width:40,height:40,backgroundColor:'white' ,margin:10}}>
              <Text style={{fontSize:16}}>4</Text>
          </View>
      </View>
    );
  }
}

flex-wrap 是否自動換行

為每個(gè) 小的view的寬度設(shè)為 140了燕锥。橫向排列

QQ截圖20170918230141.png

這樣出現(xiàn)的效果圖是：``flexWrap:'nowrap'``` 默認(rèn)是這樣的 不管怎么樣 都不換行

QQ截圖20170918230210.png

很明顯已經(jīng)不能全部顯示了
flexWrap:'wrap' 進(jìn)行自動換行的

QQ截圖20170918230555.png

wrap-reverse 此屬性不支持。悯蝉。归形。

justifyContent 在主軸線上的對齊方式)

默認(rèn)為:justifyContent:'flex-start' 從左到右的對齊方式

QQ截圖20170918232219.png

justifyContent:'flex-end' 從右到左的對齊方式 （元素的最右側(cè)和主軸的最右側(cè)進(jìn)行對其）

QQ截圖20170918232332.png

justifyContent:'center' 交叉軸上以中間對齊 兩個(gè)箭頭的到左右的距離是相等的

QQ截圖20170918233448.png

justifyContent:'space-between' 平均分布在界面上 中間的距離是相等的

QQ截圖20170918233809.png

justifyContent:'space-around' 最左側(cè)元素到左邊的距離 最右側(cè)元素到右邊的距離 是元素間距離的一半

QQ截圖20170918234215.png

alignItems 伸縮項(xiàng)目在交叉軸上的對齊方式

flex-start（默認(rèn)） 在縱軸上開始的位置上進(jìn)行排列

QQ截圖20170919225515.png

這個(gè)是變化的布局 代碼

下面是具體的展示效果

QQ截圖20170919225636.png

flex-end在縱軸上結(jié)尾為基線排列

QQ截圖20170919225818.png

center在縱軸開始進(jìn)行居中排列

QQ截圖20170919225954.png

alignItems:'stretch' 進(jìn)行拉伸
如果是 橫向排列的（flexDirection:'row'）就不好限制子控件的高度了。

QQ截圖20170919230517.png

反之 縱向排列（flexDirection:'column'）就不要限制它的寬度了鼻由。

QQ截圖20170919230634.png

進(jìn)行子視圖的屬性

alignSelf 子視圖的排列方式暇榴，相當(dāng)于重寫父視圖的 alignItems

詳細(xì)請看

QQ截圖20170919231811.png

alignSelf:'flex-end' 右對齊

QQ截圖20170919231606.png

alignSelf:'center' 中間對齊

QQ截圖20170919231728.png

flex 權(quán)重比例 就是伸縮的能力 默認(rèn)為0

QQ截圖20170919232213.png

效果圖為

QQ截圖20170919232246.png

borderWidth:10指定視圖的邊框是10
borderColor:'blue' 指定視圖的邊框顏色是藍(lán)色

QQ截圖20170919232743.png

效果圖是：

QQ截圖20170919232821.png

還有其他的屬性 請看

QQ截圖20170919232857.png

視圖的padding margin

和Android 一樣的

QQ截圖20170919233607.png

給父視圖進(jìn)行設(shè)置 padding值

left right top bottom 都可以設(shè)置的屬性 意思是偏離的距離