彈性盒模型（The Flexible Box Module）,又叫Flexbox，意為“彈性布局”，旨在通過彈性的方式來對齊和分布容器中內容的空間，使其能適應不同屏幕，為盒裝模型提供最大的靈活性，Flexbox可以在不同屏幕尺寸上提供一致的布局結構。
在React-Native使用FlexBox布局能夠大大提升我們的開發(fā)效率FlexBox能做的有
- 適配屏幕；
- 快速垂直和水平居中
- 自動分配寬度和高度。
一、主軸和側軸，標志著在主軸和側軸上的布局方式，在React-Native中默認的主軸方式是豎直的，當然，也可以根據需要選擇合適的對齊方式。
二、常見的屬性
（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'}} >測試一</Text>
<Text style={{backgroundColor:'yellow'}}>測試二</Text>
<Text style={{backgroundColor:'gray'}}>測試三</Text>
<Text style={{backgroundColor:'blue'}}>測試四</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor:'skyblue',
marginTop:100,
}
});
AppRegistry.registerComponent('untitled', () => untitled);
看結果可知默認是豎直的
把樣式代碼改一下
const styles = StyleSheet.create({
container: {
backgroundColor:'skyblue',
marginTop:100,
flexDirection:'row', //添加了這行
}
});
（2）. justifyContent：（flex-start、center、flex-end、space-around以及space-between）來控制主軸的布局樣式
我們分別來試試這個屬性
flex-start 默認就是這個樣式
const styles = StyleSheet.create({
container: {
backgroundColor:'skyblue',
marginTop:100,
flexDirection:'row',
justifyContent:'flex-start',
}
});
center居中
flex-end
space-around 表示單個元素周邊的間距 注意對比space-between
space-between表示兩個元素之間 注意對比space-around
（3）. alignItems（flex-start、center、flex-end以及stretch）這個是用來控制側軸方向的對齊方式的，此時的側軸是Y軸
我們再來吧代碼改一下
export default class untitled extends Component {
render() {
return (
<View style={styles.container}>
<Text style={{backgroundColor:'red',height:80}} >測試一</Text>
<Text style={{backgroundColor:'yellow',height:90}}>測試二</Text>
<Text style={{backgroundColor:'gray',height:50}}>測試三</Text>
<Text style={{backgroundColor:'blue',height:100}}>測試四</Text>
</View>
);
}
}
給每個item都加上一個高度 也就是默認flex-start的顯示
center
flex-end
stretch
注意：要使stretch選項生效的話，子元素在次軸方向上不能有固定的尺寸。以下面的代碼為例：只有將子元素樣式中的width: 50去掉之后，alignItems: 'stretch'才能生效。
export default class untitled extends Component {
render() {
return (
<View style={styles.container}>
<Text style={{backgroundColor:'red'}} >測試一</Text>
<Text style={{backgroundColor:'yellow'}}>測試二</Text>
<Text style={{backgroundColor:'gray'}}>測試三</Text>
<Text style={{backgroundColor:'blue'}}>測試四</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor:'skyblue',
marginTop:100,
flexDirection:'row',
alignItems:'stretch',
height:100,
}
});
（4）. flexWrap（nowrap | wrap）,這個是用來當主軸顯示不下的時候該怎么顯示的
nowrap，默認不換行
wrap，顯示不下換行
export default class untitled extends Component {
render() {
return (
<View style={styles.container}>
<Text style={{backgroundColor:'red',width:90}} >測試一</Text>
<Text style={{backgroundColor:'yellow',width:100}}>測試二</Text>
<Text style={{backgroundColor:'gray',width:200}}>測試三</Text>
<Text style={{backgroundColor:'blue',width:300}}>測試四</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 )是總的份額，也就是對應元素在父控件位置所占的比例
export default class untitled extends Component {
render() {
return (
<View style={styles.container}>
<Text style={{backgroundColor:'red',flex:1}} >測試一</Text>
<Text style={{backgroundColor:'yellow',flex:2}}>測試二</Text>
<Text style={{backgroundColor:'gray',flex:1}}>測試三</Text>
<Text style={{backgroundColor:'blue',flex:4}}>測試四</Text>
</View>
);
}
}
sum( flexGorw ) = 1 + 2 + 1 + 4 = 8
所以:
測試一 1 / 8;
測試二 2 / 8;
測試三 1 / 8;
測試四 4 / 8;
（6）. alignSelf，給某個item添加例外的
export default class untitled extends Component {
render() {
return (
<View style={styles.container}>
<Text style={{backgroundColor:'red',flex:1,height:100}} >測試一</Text>
<Text style={{backgroundColor:'yellow',flex:2,height:50}}>測試二</Text>
<Text style={{backgroundColor:'gray',flex:1,height:80}}>測試三</Text>
<Text style={{backgroundColor:'blue',flex:4,height:30}}>測試四</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor:'skyblue',
marginTop:100,
flexDirection:'row',
alignItems:'flex-end',
}
});
像上面的在側軸上是flex-end，如果只想讓測試四居中怎么辦呢，就可以使用alignSelf屬性
export default class untitled extends Component {
render() {
return (
<View style={styles.container}>
<Text style={{backgroundColor:'red',flex:1,height:100}} >測試一</Text>
<Text style={{backgroundColor:'yellow',flex:2,height:50}}>測試二</Text>
<Text style={{backgroundColor:'gray',flex:1,height:80}}>測試三</Text>
<Text style={{backgroundColor:'blue',flex:4,height:30,alignSelf:'center'}}>測試四</Text>
</View>
);
}
}
