CSS 中 Flex-Box 語法鏈接 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex 是 Flexible Box 的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為 Flex 布局。
布局源碼
import React, { Component } from 'react'; import { Platform, StyleSheet, View, Image, } from 'react-native'; const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu', }); export default class App extends Component { render() { return ( <View style={styles.container}> <Image style={styles.image} source={require('./img/point.png')}/> <Image style={styles.image} source={require('./img/point.png')}/> <Image style={styles.image} source={require('./img/point.png')}/> </View> ); } }水平布局（不設置朝向，則默認為豎直布局）
const styles = StyleSheet.create({ container: { flexDirection: 'row', }, image: { width: 40, height: 40, padding: 20, } });豎直布局（不設置朝向，則默認為豎直布局）
const styles = StyleSheet.create({ container: { flexDirection: 'column', }, image: { width: 40, height: 40, padding: 20, } });默認樣式 頂部 水平居左/左上角
const styles = StyleSheet.create({ container: { }, image: { width: 40, height: 40, padding: 20, background: '#00000033' } });或
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', }, image: { width: 40, height: 40, padding: 20, background: '#00000033' } });
頂部 水平居中
const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', }, image: { width: 40, height: 40, padding: 20, } });
頂部 水平居右/右上角
const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'flex-end', }, image: { width: 40, height: 40, padding: 20, } });居左 豎直居中
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, image: { width: 40, height: 40, padding: 20, } });水平且垂直居中（顯示在屏幕中央）
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, image: { width: 40, height: 40, padding: 20, } });
居右 豎直居中
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'flex-end', }, image: { width: 40, height: 40, padding: 20, } });底部 水平居左/左下角
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-end', }, image: { width: 40, height: 40, padding: 20, } });
底部 水平居中
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-end', alignItems: 'center', }, image: { width: 40, height: 40, padding: 20, } });底部 水平居右/右下角
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-end', alignItems: 'flex-end', }, image: { width: 40, height: 40, padding: 20, } });
設置 flexDirection 屬性，改變的是主軸的方向，如果不設置 flexDirection 屬性，則默認布局朝向是豎直方向的，上面的例子是 flexDirection: column（豎直朝向）的效果，可以用 flexDirection: row（水平朝向） 和 flexDirection: column（豎直朝向） 來設置布局朝向。如果在 style 中添加 flexDirection: row 屬性，則上述效果會改變，如下述例子（建議嘗試上述樣式基礎上、添加 flexDirection: row 后的效果）
理解：flexDirection: column（豎直朝向）時， x 軸為主軸，justifyContent 屬性控制子控件相對 x 軸的 上/中/下 位置，y 軸為副軸，alignItems 屬性控制子控件相對 y 軸的 左/中/右 位置；flexDirection: row（水平朝向）時， y 軸為主軸，justifyContent 屬性控制子控件相對 y 軸的 左/中/右 位置，x 軸為副軸，alignItems 屬性控制子控件相對 x 軸的 上/中/下 位置
默認或設置為 flexDirection: column 時
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center', }, image: { width: 40, height: 40, padding: 20, } });或
const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center', }, image: { width: 40, height: 40, padding: 20, } });設置為 flexDirection: row 時
const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }, image: { width: 40, height: 40, padding: 20, } });justifyContent 的屬性值
上述代碼中用到了 justifyContent 屬性的 flex-start（默認值）：左對齊、center： 居中、flex-end：右對齊，但 justifyContent 還有2個屬性值
下面的這兩個屬性值，可以搭配 alignItems 的 flex-start、flex-end、center 三個屬性搭配使用‘space-between’：兩端對齊，項目之間的間隔都相等
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'space-between' }, image: { width: 40, height: 40, padding: 20, } });‘space-around’：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'space-around' }, image: { width: 40, height: 40, padding: 20, } });
alignItems 的屬性值
上述代碼中用到了 alignItems 屬性的 flex-start（默認值）：上對齊、center： 居中、flex-end：下對齊，但 alignItems 還有2個屬性值
下面的這兩個屬性值，可以搭配 justifyContent 的 flex-start、flex-end、center 三個屬性搭配使用‘baseline’: 項目的第一行文字的基線對齊
//TODO 沒看到效果呢
const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'baseline' }, image: { width: 40, height: 40, padding: 20, } });‘stretch’（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度
//TODO 沒看到效果呢
const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'stretch' }, image: { width: 40, height: 40, padding: 20, } });flex-grow 的屬性值：定義項目的放大比例
默認為0，如果所有 item 的 flex-grow 屬性都為1，則它們將等分剩余空間。如果某一個 item 的flex-grow屬性為2，其他 item 都為1，則該 item 占據的剩余空間將比其他 item 多一倍
const styles = StyleSheet.create({ container: { flex: 1, }, image: { flexGrow: 1, width: 40, height: 40, padding: 20, } });
const styles = StyleSheet.create({ container: { flexDirection: 'row', flex: 1, }, image: { flexGrow: 1, width: 40, height: 40, padding: 20, } });
flex-wrap 的屬性值：如果一條軸線排不下，換行。默認情況下，項目都排在一條線上（又稱”主軸線”）。flex-wrap 屬性定義
有三個屬性值：nowrap（默認）：不換行；wrap：換行、第一行在前；wrap-reverse：換行、第一行在后
const styles = StyleSheet.create({ container: { flex: 1, flexWrap: 'wrap', }, image: { width: 40, height: 40, padding: 20, } });