Flexbox

React Native中的Flexbox和CSS3中新加的Flexbox基本上是差不多的,CSS3 彈性盒子(Flexible Box 或 Flexbox)，是一種布局方式，當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)，它依然能確保元素?fù)碛懈‘?dāng)?shù)呐挪夹袨椤芏鄳?yīng)用程序來說，當(dāng)不使用浮動，且彈性容器的外邊距也不需要與其內(nèi)容的外邊距合并時(shí)，彈性盒子模型比起方框模型要好一些。
許多設(shè)計(jì)師會發(fā)現(xiàn)彈性盒子模型更易于使用。彈性盒子中的子元素可以在各個(gè)方向上進(jìn)行布局，并且能以彈性尺寸來適應(yīng)顯示空間。由于元素的顯示順序可以與它們在源代碼中的順序無關(guān)，定位子元素將變得更容易，并且能夠用更簡單清晰的代碼來完成復(fù)雜的布局。這種無關(guān)性是僅限制于視覺呈現(xiàn)上的，語音順序以及基于源代碼順序的導(dǎo)航均不受影響。
但是呢，相對于CSS中的Flexbox它的屬性名稱不太一樣，而且屬性值也少，默認(rèn)值也許也不一樣。

樣式屬性

Flex Direction

在組件style中指定flexDirection可以決定布局的主軸。就是指子元素排列方向，水平方向(row)排列,豎直方向(column)排列。默認(rèn)值:column
我們以初始化的模板為例，在View中再添加3個(gè)View，并設(shè)置flexDirection值為:row

export default class HHHHeats extends Component {
  render() {
    return (
      <View style={styles.container}>
      
      <View style = {styles.views}>
      </View>
      <View style = {styles.views}>
      </View>
      <View style = {styles.views}>
      </View
      
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',//主軸排列方式
    alignItems: 'stretch',//次軸排列方式
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主軸方向
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  views: {
    backgroundColor: 'green',
    width: 100,
    height: 100,
    marginLeft: 10,
    marginTop: 10,
  }
});

效果:

Paste_Image.png

Justify Content

上面的flexDirection決定了方向，這個(gè)justifyContent就是決定排列的方式。就是指子元素應(yīng)該靠近主軸的起始端還是末尾段分布呢？亦或應(yīng)該均勻分布？對應(yīng)的這些可選項(xiàng)有：flex-start
、center、flex-end、space-around以及space-between。
將上面的justifyContent設(shè)置為:flex-start，效果如下圖,可以看到子元素沿著主軸方向從起始位置開始排列（原為:center）。

container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主軸方向 
  }

Paste_Image.png

Align Items

flexDirection決定了主軸方向,justifyContent決定了子元素沿主軸方向的排列方式,而alignItems就是沿次軸方向(與主軸垂直的方向,它有4種可能的字符串值：flex-start、flex-end、center、stretch。比如主軸是row，那么次軸就是column)的排列方式。
比如將上方代碼修改，alignItems屬性值改為flex-end:

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主軸方向
  }

Paste_Image.png

views: {
    backgroundColor: 'green',
    width: 100,
    //height: 100, 注釋掉
    marginLeft: 10,
    marginTop: 10,
  }

container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主軸方向
  }

效果如下:

Paste_Image.png

alignSelf

alignSelf的屬性值:auto、flex-start、flex-end、center、stretch。它的作用是用于忽略父視圖中的alignItems設(shè)置的值。比如上方代碼修改:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-start',
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',//主軸方向
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  views: {
    backgroundColor: 'green',
    width: 100,
    height: 100,
    marginLeft: 10,
    marginTop: 10,
    alignSelf: 'flex-end'
  }
});

alignItems已經(jīng)設(shè)置了flex-start，在子元素中alignSelf設(shè)置flex-end最終顯示的為flex-end:

Paste_Image.png