概述

FlexBox（弹性框布局）：英文全称the flexible box Module，FlexBox旨在提供了在不同尺寸设备上都能保持一致的布局方式。
其主要思想是：让容器有能力让其子项目能够改变其宽度|高度|顺序，以最佳方式填充可用空间。在布局中，首先得确定主轴方向(flexDirection)，主轴组件的对齐方式（justifyContent），侧轴组件的对齐方式(alignItems)，通过以上四点可以基本确定布局。
注：FlexBox是CSS3弹性框布局规范，目前还处于最终征求意见稿 (Last Call Working Draft)阶段，并不是所有的浏览器都支持Flexbox。

在学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸，显示的效果。

FlexBox属性

为了更好的理解与应用FlexBox，我们先看一下FlexBox所具有的属性。

主轴和侧轴(横轴和竖轴)

在学习属性之前，让我们先了解一个概念：主轴和侧轴。

如图：主轴即水平方向的轴线，可以理解成横轴，侧轴垂直于主轴，可以理解为竖轴。

flexDirection
该属性确定了主轴方向。

属性名	说明
row(默认)	主轴方向为水平，起点在左端
row- reverse	主轴方向为水平，起点在右端
column	主轴方向为垂直，起点在上端
column-reverse	主轴方向为垂直，起点在下端

justifyContent
该属性确定了组件在主轴方向上的对齐方式。

属性名	说明
flex-start(默认)	组件沿着主轴方向的起始位置靠齐
flex-end	组件沿着主轴方向的结束位置靠齐，和flex-start相反
space-between	组件在主轴方向上两端对齐，其中的间隔相等
space-around	组件会平均分配在主轴方向上，两端保留一定的位置空间

alignItems
该属性确定了组件在侧轴方向上的对齐方式。

属性名	说明
flex-start	组件沿着侧轴上的起点对齐
flex-end	组件沿着侧轴上的终点对齐
center	组价在侧轴方向上居中对齐
stretch(默认)	组件在侧轴方向上占满

flexWrap
该属性主要用作换行，默认情况下，项目都排列在一条线上，放不下的部分则不放置，flexWap就是定义是否换行的。。

属性名	说明
nowrap(默认)	不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

代码示例

<View style={ {flexDirection:'row-reverse',backgroundColor:"darkgray",marginTop:20}}>
    <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>1</Text>
  </View>
  <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>2</Text>
  </View>
  <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>3</Text>
  </View>
  <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>4</Text>
  </View>
  </View>

宽和高

在React Native中尺寸是没有单位的，它代表了设备独立像素。有点类似于Android的设备像素。
如：

<View style={ {width:100,height:100,margin:40,backgroundColor:'gray'}}>
        <Text style={ {fontSize:16,margin:20}}>尺寸</Text>
</View>

上诉代码：运行在Android上时，View的长和宽被解释成：100dp 100dp单位是dp，字体被解释成16sp 单位是sp，运行在iOS上时尺寸单位被解释称了pt，这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变。

RN的FlexBox和css的FlexBox的异同

虽然React Native中的FlexBox 和Web CSSS上FlexBox工作方式是一样的。但是在某些方面还是有细微区别的：

• flexDirection: React Native中默认为flexDirection:’column’，在Web CSS中默认为flex-direction:’row’
• alignItems: React Native中默认为alignItems:’stretch’，在Web CSS中默认align-items:’flex-start’
• flex: React Native中flex只接受一个参数，而Web Css的flex可以接受多参数，如:flex: 2 2 10%
• RN不支持属性：align-content，flex-basis，order，flex-basis，flex-flow，flex-grow，flex-shrink

React Native

React Native布局属性

以下属性是React Native所支持的Flex属性。

父视图属性(容器属性)：

• flexDirection enum(‘row’, ‘column’,’row-reverse’,’column-reverse’)
• flexWrap enum(‘wrap’, ‘nowrap’)
• justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’,
  ‘space-between’, ‘space-around’)
• alignItems enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)

justifyContent

该属性定义了浏览器如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间，默认为flex-start。

属性名	说明
flex-start(默认)	从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐
flex-end	从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
center	伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
space-between	在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
space-around	在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

代码示例：

<View 		 style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>

alignItems

属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。
属性请参照本文开头的讲解。
代码示例：

<View 		 style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>

子视图属性

alignSelf

该属性以属性定义了flex容器内被选中项目的对齐方式。注意：alignSelf 属性可重写灵活容器的 alignItems 属性。

属性名	说明
auto(默认)	元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”
stretch	元素被拉伸以适应容器
center	元素位于容器的中心
flex-start	元素位于容器的开头
flex-end	元素位于容器的结尾

代码示例：

<View style={ {alignSelf:'baseline',width:60,height:	20,backgroundColor:"darkcyan",margin:5}}>
   <Text style={ {fontSize:16}}>1</Text>
</View>

flex

该属性定义了一个可伸缩元素的能力，默认为0。类似于比重这么一个概念（因其位于父视图下面，所以比重相当于所占的百分比）。

代码示例：

<View style={ {flexDirection:'row',height:40, backgroundColor:"darkgray",marginTop:20}}>
  <View style={ {flex:1,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:1</Text>
  </View>
  <View style={ {flex:2,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:2</Text>
  </View>
  <View style={ {flex:3,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:3</Text>
  </View>          
</View>

其他属性

视图边框

属性名	说明
borderBottomWidth	底部边框宽度
borderLeftWidth	左边框宽度
borderRightWidth	右边框宽度
borderTopWidth	顶部边框宽度
borderWidth	边框宽度
border（Bottom|Left|Right|Top）Color	边框颜色

外边框

属性名	说明
margin	外边距
marginBottom	下外边距
marginHorizontal	左右外边距
marginLeft	左外边距
marginRight	右外边距
marginTop	上外边距
marginVertical	上下外边距

内边框

属性名	说明
padding	内边距
paddingBottom	下内边距
paddingHorizontal	左右内边距
paddingLeft	左内边距
paddingRight	右内边距
paddingTop	上内边距
paddingVertical	上下内边距

边缘

属性名	说明
left	元素的左边缘
right	元素的右边缘
top	元素的上边缘
bottom	元素的下边缘

元素定位

属性名	说明
absolute	生成绝对定位的元素，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
relative	生成相对定位的元素，相对于其正常位置进行定位