彈性盒模型（The Flexible Box Module）,又叫Flexbox，意為“彈性布局”，旨在通過(guò)彈性的方式來(lái)對(duì)齊和分布容器中內(nèi)容的空間，使其能適應(yīng)不同屏幕，為盒裝模型提供最大的靈活性，F(xiàn)lexbox可以在不同屏幕尺寸上提供一致的布局結(jié)構(gòu)。

在React-Native使用FlexBox布局能夠大大提升我們的開(kāi)發(fā)效率FlexBox能做的有

1. 適配屏幕；
2. 快速垂直和水平居中
3. 自動(dòng)分配寬度和高度。

一、主軸和側(cè)軸，標(biāo)志著在主軸和側(cè)軸上的布局方式，在React-Native中默認(rèn)的主軸方式是豎直的，當(dāng)然，也可以根據(jù)需要選擇合適的對(duì)齊方式。

二、常見(jiàn)的屬性

（1）. flexDirection：（row | column）

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red'}} >測(cè)試一</Text>
              <Text style={{backgroundColor:'yellow'}}>測(cè)試二</Text>
              <Text style={{backgroundColor:'gray'}}>測(cè)試三</Text>
              <Text style={{backgroundColor:'blue'}}>測(cè)試四</Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
          backgroundColor:'skyblue',
      marginTop:100,
    }
});

AppRegistry.registerComponent('untitled', () => untitled);

看結(jié)果可知默認(rèn)是豎直的

把樣式代碼改一下

const styles = StyleSheet.create({
    container: {
      backgroundColor:'skyblue',
      marginTop:100,
        flexDirection:'row', //添加了這行
    }
});

（2）. justifyContent：（flex-start、center、flex-end、space-around以及space-between）來(lái)控制主軸的布局樣式

 我們分別來(lái)試試這個(gè)屬性

flex-start 默認(rèn)就是這個(gè)樣式

const styles = StyleSheet.create({
    container: {
      backgroundColor:'skyblue',
      marginTop:100,
      flexDirection:'row',
    justifyContent:'flex-start',
    }
});

center居中

flex-end

space-around 表示單個(gè)元素周邊的間距 注意對(duì)比space-between

space-between表示兩個(gè)元素之間 注意對(duì)比space-around

（3）. alignItems（flex-start、center、flex-end以及stretch）這個(gè)是用來(lái)控制側(cè)軸方向的對(duì)齊方式的，此時(shí)的側(cè)軸是Y軸

我們?cè)賮?lái)吧代碼改一下

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red',height:80}} >測(cè)試一</Text>
              <Text style={{backgroundColor:'yellow',height:90}}>測(cè)試二</Text>
              <Text style={{backgroundColor:'gray',height:50}}>測(cè)試三</Text>
              <Text style={{backgroundColor:'blue',height:100}}>測(cè)試四</Text>

            </View>
        );
    }
}

給每個(gè)item都加上一個(gè)高度 也就是默認(rèn)flex-start的顯示

center

flex-end

stretch

注意：要使stretch選項(xiàng)生效的話(huà)，子元素在次軸方向上不能有固定的尺寸。以下面的代碼為例：只有將子元素樣式中的width: 50去掉之后，alignItems: 'stretch'才能生效。

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red'}} >測(cè)試一</Text>
              <Text style={{backgroundColor:'yellow'}}>測(cè)試二</Text>
              <Text style={{backgroundColor:'gray'}}>測(cè)試三</Text>
              <Text style={{backgroundColor:'blue'}}>測(cè)試四</Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      backgroundColor:'skyblue',
      marginTop:100,
      flexDirection:'row',
        alignItems:'stretch',
        height:100,

    }
});

（4）. flexWrap（nowrap | wrap）,這個(gè)是用來(lái)當(dāng)主軸顯示不下的時(shí)候該怎么顯示的

nowrap，默認(rèn)不換行

wrap，顯示不下?lián)Q行

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red',width:90}} >測(cè)試一</Text>
              <Text style={{backgroundColor:'yellow',width:100}}>測(cè)試二</Text>
              <Text style={{backgroundColor:'gray',width:200}}>測(cè)試三</Text>
              <Text style={{backgroundColor:'blue',width:300}}>測(cè)試四</Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      backgroundColor:'skyblue',
      marginTop:100,
      flexDirection:'row',
        alignItems:'stretch',
        flexWrap:'wrap',

    }
});

（5）. flex控制顯示范圍的

寬度 ＝ 彈性寬度 * ( flexGrow / sum( flexGorw ) )

flexGrow是占的份額，sum( flexGorw )是總的份額，也就是對(duì)應(yīng)元素在父控件位置所占的比例

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red',flex:1}} >測(cè)試一</Text>
              <Text style={{backgroundColor:'yellow',flex:2}}>測(cè)試二</Text>
              <Text style={{backgroundColor:'gray',flex:1}}>測(cè)試三</Text>
              <Text style={{backgroundColor:'blue',flex:4}}>測(cè)試四</Text>

            </View>
        );
    }
}

sum( flexGorw ) = 1 + 2 + 1 + 4 = 8
所以:
測(cè)試一 1 / 8;
測(cè)試二 2 / 8;
測(cè)試三 1 / 8;
測(cè)試四 4 / 8;

（6）. alignSelf，給某個(gè)item添加例外的

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red',flex:1,height:100}} >測(cè)試一</Text>
              <Text style={{backgroundColor:'yellow',flex:2,height:50}}>測(cè)試二</Text>
              <Text style={{backgroundColor:'gray',flex:1,height:80}}>測(cè)試三</Text>
              <Text style={{backgroundColor:'blue',flex:4,height:30}}>測(cè)試四</Text>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      backgroundColor:'skyblue',
      marginTop:100,
      flexDirection:'row',
        alignItems:'flex-end',



    }
});

像上面的在側(cè)軸上是flex-end，如果只想讓測(cè)試四居中怎么辦呢，就可以使用alignSelf屬性

export default class untitled extends Component {
    render() {
        return (
            <View style={styles.container}>

              <Text style={{backgroundColor:'red',flex:1,height:100}} >測(cè)試一</Text>
              <Text style={{backgroundColor:'yellow',flex:2,height:50}}>測(cè)試二</Text>
              <Text style={{backgroundColor:'gray',flex:1,height:80}}>測(cè)試三</Text>
              <Text style={{backgroundColor:'blue',flex:4,height:30,alignSelf:'center'}}>測(cè)試四</Text>

            </View>
        );
    }
}