今天在講解Flexbox之前，我們先講解一下高度和寬度的問題。因為Height and Width的問題很簡單，就不單獨寫一篇文章了。順帶說一下即可。

Height and Width

一個組件的高度和寬度，決定了它在屏幕上顯示的大小。

固定尺寸

最簡單的設(shè)置組件的尺寸的方法就是通過添加一個固定的寬度和高度。所有尺寸大小在React Native沒有單位的,代表著獨立的像素密度。

官網(wǎng)例子

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

class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

效果圖：

這樣設(shè)置尺寸大小的方式，比較適合于要求不同的屏幕上顯示相同大小的View或者組件。寫固定的尺寸大小，死值。

彈性寬高

我們可以在組件樣式中使用flex讓組件根據(jù)可用空間動態(tài)的收縮和擴展。通常情況下我們可以使用flex: 1，告訴某個組件來填充剩余的所有的空間，如果是多個組件的話，則是所有的這些組件去平分父容器中的剩余的所有空間。。如果這些并列的子組件的flex值不一樣，則誰的值更大，誰占據(jù)剩余空間的比例就更大（跟我們android中weight的用法差不多）。

官網(wǎng)例子

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

class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);

效果圖：

關(guān)于高度和寬度就講這些吧，其實內(nèi)容都是翻譯與官網(wǎng)的docs，地址：
https://facebook.github.io/react-native/docs/height-and-width.html#height-and-width

Flexbox

一個組件可以使用Flexbox指定其子組件或元素之間的布局。Flexbox旨在為不同的屏幕上提供一致的布局。

通常情況下，我們結(jié)合使用flexDirection、alignItems和 justifyContent三個樣式屬性就已經(jīng)能夠?qū)崿F(xiàn)我們所需的布局。

注意：Flexbox在React Native的工作原理和使用方式與css在web上的方式基本一樣，當(dāng)然也有一些例外：比如flexDirection的默認(rèn)值是column而不是row，alignItems的默認(rèn)值是stretch而不是flex-start，以及flex只能指定一個數(shù)字值。

Flex Direction

向一個組件的樣式中添加Flex Direction可以決定一個布局的主軸。子元素應(yīng)該沿著水平方向(row)排列，還是沿著豎直方向(column)排列呢？默認(rèn)值是豎直(column)方向。

官網(wǎng)例子

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

class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

效果圖：

Justify Content

向組件的樣式中添加Justify Content可以決定其子元素沿著主軸的排列方式。子元素應(yīng)該分布在主軸的開始端，還是中間，最后，還是均勻分布？可用的選項有：flex-start、center、flex-end、space-around以及space-between。

• flex-start：彈性盒子元素將與行起始位置對齊。該行的第一個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊，同時所有后續(xù)的伸縮盒項目與其前一個項目對齊。
• flex-end：彈性盒子元素將與行結(jié)束位置對齊。該行的第一個子元素的主結(jié)束位置的邊界將與該行的主結(jié)束位置的邊界對齊，同時所有后續(xù)的伸縮盒項目與其前一個項目對齊。
• center：彈性盒子元素將與行中間位置對齊。該行的子元素將相互對齊并在行中居中對齊，同時第一個元素與行的主起始位置的邊距等同與最后一個元素與行的主結(jié)束位置的邊距（如果剩余空間是負(fù)數(shù)，則保持兩端相等長度的溢出）。
• space-between：彈性盒子元素會均勻分布在行里。如果最左邊的剩余空間是負(fù)數(shù)，或該行只有一個子元素，則該值等效于'flex-start'。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最后一個元素的邊界與行的主結(jié)束位置的邊距對齊，而剩余的伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等。
• space-around：彈性盒子元素會均勻分布在行里，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負(fù)數(shù)，或該行只有一個伸縮盒項目，則該值等效于'center'。在其它情況下，伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半。

官網(wǎng)例子

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

class JustifyContentBasics extends Component {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);

效果圖：

Align Items

向組件的樣式（style）中添加alignItems可以決定其子元素沿著次軸（就是與主軸垂直的軸，比如若主軸方向為row，則次軸方向為column）的排列方式。子元素是應(yīng)該靠近次軸的開始端還是中間，還是末端，亦或是拉伸來填補呢？可用選項有：flex-start、center、flex-end以及stretch。

• flex-start：彈性盒子元素的次軸起始位置的邊界緊靠該行的次軸起始邊界。
• flex-end：彈性盒子元素的次軸起始位置的邊界緊靠住該行的次軸結(jié)束邊界。
• center：彈性盒子元素在該行的次軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
• stretch：如果指定次軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

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

官網(wǎng)例子

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

class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

效果圖：

文章翻譯并參考于Flexbox官方文檔，地址：
https://facebook.github.io/react-native/docs/flexbox.html

好了，到這里關(guān)于Flexbox的講解就講到這里了，關(guān)于Flexbox運用，上面的例子只是冰山一角，要想真正熟練掌握，還得靠自己親自動手去寫，去實踐，才能夠真正來理解各個屬性的意思。趕緊動手去實踐吧。