（友情提示：RN學習，從最基礎的開始，大家不要嫌棄太基礎，會的同學請自行略過，希望不要耽誤已經會的同學的寶貴時間）

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

Height and Width

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

固定尺寸

最簡單的設定元件的尺寸的方法就是通過新增一個固定的寬度和高度。所有尺寸大小在React Native沒有單位的,代表著獨立的畫素密度。

官網例子

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);
 

效果圖：

這樣設定尺寸大小的方式，比較適合於要求不同的螢幕上顯示相同大小的View或者元件。寫固定的尺寸大小，死值。

彈性寬高

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

官網例子

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);
 

效果圖：

關於高度和寬度就講這些吧，其實內容都是翻譯與官網的docs，地址： https://facebook.github.io/react-native/docs/height-and-width.html#height-and-width

Flexbox

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

通常情況下，我們結合使用flexDirection、alignItems和 justifyContent三個樣式屬性就已經能夠實現我們所需的佈局。

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

Flex Direction

向一個元件的樣式中新增Flex Direction可以決定一個佈局的主軸。子元素應該沿著水平方向(row)排列，還是沿著豎直方向(column)排列呢？預設值是豎直(column)方向。

官網例子

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可以決定其子元素沿著主軸的排列方式。子元素應該分佈在主軸的開始端，還是中間，最後，還是均勻分佈？可用的選項有：flex-start、center、flex-end、space-around以及space-between。

• flex-start：彈性盒子元素將與行起始位置對齊。該行的第一個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊，同時所有後續的伸縮盒專案與其前一個專案對齊。
• flex-end：彈性盒子元素將與行結束位置對齊。該行的第一個子元素的主結束位置的邊界將與該行的主結束位置的邊界對齊，同時所有後續的伸縮盒專案與其前一個專案對齊。
• center：彈性盒子元素將與行中間位置對齊。該行的子元素將相互對齊並在行中居中對齊，同時第一個元素與行的主起始位置的邊距等同與最後一個元素與行的主結束位置的邊距（如果剩餘空間是負數，則保持兩端相等長度的溢位）。
• space-between：彈性盒子元素會均勻分佈在行裡。如果最左邊的剩餘空間是負數，或該行只有一個子元素，則該值等效於'flex-start'。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最後一個元素的邊界與行的主結束位置的邊距對齊，而剩餘的伸縮盒專案則平均分佈，並確保兩兩之間的空白空間相等。
• space-around：彈性盒子元素會均勻分佈在行裡，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩餘空間是負數，或該行只有一個伸縮盒專案，則該值等效於'center'。在其它情況下，伸縮盒專案則平均分佈，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最後一個元素後的空間為其他空白空間的一半。

官網例子

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）的排列方式。子元素是應該靠近次軸的開始端還是中間，還是末端，亦或是拉伸來填補呢？可用選項有：flex-start、center、flex-end以及stretch。

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

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

官網例子

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

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