1 flex布局基本概念
flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用flex布局的元素，称为flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称"项目"。如下图所示：
容器默认存在两根轴：主轴（main axis）和交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
Flex布局与Android的线性布局（LinearLayout）有点类似，都可以设置布局方向，对齐方式，以及项目的布局占位权重，区别是flex容器中项目分布的总长度超出屏幕宽度，超出的那部分项目不可见，项目不会变形，或者可以设置flexWrap属性，让容器可以分行布局，所有项目都能显示出来。
2 flex基本属性
flex属性声明在：/node_modules/react-native/Libraries/StyleSheet/LayoutPropTypes.js
// https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
flexDirection: ReactPropTypes.oneOf([
'row','column'
]),// https:/CSS/flex-wrap
flexWrap: 'wrap',68)">'nowrap'
]),38)">// How to align children @H_404_52@in the main direction
/CSS/justify-content
justifyContent: 'flex-start',68)">'flex-end',68)">'center',68)">'space-between',68)">'space-around'
]),153)">How to align children @H_404_52@in the cross direction
/CSS/align-items
alignItems: 'stretch'
]),153)">How to align the element @H_404_52@in the cross direction
/alignSelf: 'auto',153)">CSS/flex
flex: ReactPropTypes.number,
由上述代码，我们可以看到flex的属性并不多，而且很好记忆，以下将会一一介绍
flex属性可以分为容器属性和项目属性
其中容器属性包括：flexDirection，justifyContent，alignItems，flexWrap
以下介绍会使用到一些代码和图片，先定义两个简单组件，方便理解
//定义一个默认半径为20，颜色为#527fe4的圆组件 var Circle = React.createClass({ render : function(){ var size = this.props.size || 20; var color = this.props.color || '#527fe4'; return <View style={{backgroundColor:color,borderRadius:size/2,height:size,width:size,margin:1}}/> },}); //定义一个放置标题和项目的容器，传入的value属性将会是需要介绍的flex属性 var Value = React.createClass({ render : function(){ var value = <View> <Text style={styles.valueText}>{this.props.title}</Text> <View style={[styles.valueContainer,this.props.value]}> {this.props.children} </View> </View>; return value; },}); //定义一个数组放置5个圆 var children = [<Circle/>,<Circle/>,<Circle/>];
2.1 容器属性
-
flexDirection：布局方向，决定主轴的方向，默认值是
column，即纵向布局|值 |描述 | |------|--------------------| |row |横向布局，主轴为水平方向| |column|纵向布局，主轴为竖直方向|row：横向布局
代码：
<Value title='row' value={{flexDirection:'row'}}> {children} </Value>视图：
