- 在React-Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。一般来说，使用
flexDirection、alignItems、justifyContent三个样式属性就已经能够满足大多数布局需求。 - React-Native中的Flexbox的工作原理和web上的CSS基本一致，但是也有一些差异：
flexDirection的默认值是column，而不是row；flex也只能指定一个数字值。
1. Flex Direction
- 在这里需要引入一个主轴的概念，我们可以理解为子组件排列的方向。
row // 主轴为水平方向,从左向右 row-reverse // 主轴为水平方向，从右向左 column // 主轴为竖直方向，从上到下，默认值 column-reverse // 主轴为竖直方向，从下到上export default class Layout_Flex extends Component { render() { return ( <View style={{flex: 1, backgroundColor: 'white'}}> // flexDirection: 'row', 水平排列 <View style={{flex:1, flexDirection: 'row', backgroundColor: '#d400ff', paddingTop: 20}}> <View style={{width: 100, height: 100, backgroundColor: 'powderblue'}}> </View> <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}}> </View> <View style={{width: 100, height: 100, backgroundColor: 'steelblue'}}> </View> </View> // flexDirection: 'column', 竖直排列 <View style={{flex:1, flexDirection: 'column', backgroundColor: '#ffc700', paddingTop: 20}}> <View style={{width: 100, height: 100, backgroundColor: 'powderblue'}}> </View> <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}}> </View> <View style={{width: 100, height: 100, backgroundColor: 'steelblue'}}> </View> </View> </View> ); } }
flexDirection.png
2. Justify Content
- 决定子组件沿着主轴的排列方式，有以下可选项：
flex-start //沿主轴方向，从始端向末端排列 center： //沿主轴方向，从中心位置向两头排列 flex-end： //沿主轴方向，从末端向始端排列 space-around: //沿主轴方向，等间距排列，首末子组件与父组件相距1/2个间距 space-between: //沿主轴方向，等间距排列，首末子组件与父组件相距0export default class Layout_Flex extends Component { render() { return ( <View style={{flex: 1, backgroundColor: 'white', marginTop: 20}}> <View style={{flexDirection: 'column', justifyContent: 'flex-start', backgroundColor: '#ffc700', height: 100}}> <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View> </View> <View style={{flexDirection: 'column', justifyContent: 'center', backgroundColor : '#ff7a00', height: 100}}> <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View> </View> <View style={{flexDirection: 'column', justifyContent: 'flex-end', backgroundColor : '#c4ff00', height: 100}}> <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View> </View> <View style={{flexDirection: 'column', justifyContent: 'space-around', backgroundColor : '#00ffd9', height: 100}}> <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View> </View> <View style={{flexDirection: 'column', justifyContent: 'space-between', backgroundColor : '#008cff', height: 100}}> <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View> </View> </View> ); } } - 主轴方向为竖直方向
justifyContent_column.png
- 主轴方向为水平方向
justifyContent_row.png
Align Items
- 决定子组件沿着次轴(与主轴垂直的轴)的排列方式。
flex-start // 沿次轴方向，从始端向末端排列 center // 沿次轴方向，重中心位置向两头排列 flex-end // 沿伺候方向，从末端向始端排列 stretch // 沿次轴反向，拉伸到与父组件相同高度或宽度 - 设置
stretch时，子组件在次轴方向上不能有固定尺寸。即主轴为竖直方向时，不能设置子组件的width；主轴为水平方向时，不能设置子组件的height。否则不会生效export default class Layout_Flex extends Component { render() { return ( <View style={{flex: 1, backgroundColor: 'white', marginTop: 20}}> <View style={{flexDirection: 'column', alignItems: 'flex-start', backgroundColor: '#ffc700', height: 100}}> <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View> </View> <View style={{flexDirection: 'column', alignItems: 'center', backgroundColor : '#ff7a00', height: 100}}> <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View> </View> <View style={{flexDirection: 'column', alignItems: 'flex-end', backgroundColor : '#c4ff00', height: 100}}> <View style={{width: 20, height: 20, backgroundColor: 'powderblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'skyblue'}}></View> <View style={{width: 20, height: 20, backgroundColor: 'steelblue'}}></View> </View> <View style={{flexDirection: 'column', alignItems: 'stretch', backgroundColor : '#00ffd9', height: 100}}> <View style={{height: 20, backgroundColor: 'powderblue'}}></View> <View style={{height: 20, backgroundColor: 'skyblue'}}></View> <View style={{height: 20, backgroundColor: 'steelblue'}}></View> </View> </View> ); } } - 主轴为竖直方向
alignItems_column.png
- 主轴为水平方向
alignItems_row.png
4.Flex Wrap
- 决定子组件在父组件内是否允许多行排列
nowrap // 子组件只允许排列在一行上，可能会溢出 wrap // 子组件在一行排列溢出时，就多行排列export default class Layout_Flex extends Component { render() { return ( <View style={{flex: 1, backgroundColor: 'white', marginTop: 20}}> <View style={{flexDirection: 'row', flexWrap: 'nowrap', backgroundColor: '#ffc700', height: 200}}> <View style={{width: 100, height: 50, backgroundColor: 'powderblue', margin: 30}}></View> <View style={{width: 100, height: 50, backgroundColor: 'skyblue', margin: 30}}></View> <View style={{width: 100, height: 50, backgroundColor: 'steelblue', margin: 30}}></View> </View> <View style={{flexDirection: 'row', flexWrap: 'wrap', backgroundColor : '#ff7a00', height: 200}}> <View style={{width: 100, height: 50, backgroundColor: 'powderblue', margin: 30}}></View> <View style={{width: 100, height: 50, backgroundColor: 'skyblue', margin: 30}}></View> <View style={{width: 100, height: 50, backgroundColor: 'steelblue', margin: 30}}></View> </View> </View> ); } }
flexWrap.png
