React Native Flex布局

1、flex布局基本概念

flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用flex布局的元素，称为flex容器（flex Container），简称"容器"。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称"项目"。如下图所示：

enter image description here

容器默认存在两根轴：主轴（main axis）和交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。Flex布局与Android的线性布局（LinearLayout）有点类似，都可以设置布局方向，对齐方式，以及项目的布局占位权重，区别是flex容器中项目分布的总长度超出屏幕宽度，超出的那部分项目不可见，项目不会变形，或者可以设置flexWrap属性，让容器可以分行布局，所有项目都能显示出来。

2 、flex基本属性

flex属性可以分为容器属性和项目属性 其中容器属性包括：

flexDirection
 justifyContent
alignItems
flexWrap```
项目属性包括：

flex
alignSelf

### 2.1 容器属性
####2.1-1、`flexDirection`：布局方向决定主轴的方向，默认值是column，即纵向布局

|值 |描述 |
|------|--------------------|
|`row` |横向布局，主轴为水平方向|
|`column`|纵向布局，主轴为竖直方向|
`row`:![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-1035d7c3372d351e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
`column`:![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-d7ea6749c21d8f8e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####2.1-2、`justifyContent`：主轴方向对齐方式
|值 | 描述 |
|-------------|-----------------------|
|`flex-start` | 主轴开端 |
|`center` | 居中 |
|`flex-end` | 主轴末端 |
|`space-between`| 项目与项目之间插入相等空隙 |
|`space-around` | 项目两旁插入相等空隙 |
**`flex-start`**：主轴开端![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-8fe15044a637441c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
**`center`**：主轴的中间位置![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-f782127b5a9b7183.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
**`flex-end`**：主轴的末端位置![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-f3416e5ee6bc49de.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)**`space-between`**：项目与项目之间插入相同距离的空隙![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-d23e1e54202521e7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)**`space-around`**：项目两旁插入相同距离的空隙![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-c94edbe5db4d9946.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####2.1-3、`alignItems`：交叉轴方向对齐方式

默认值flex-start，即交叉轴开端

|值 | 描述 |
|----------|----------|
|flex-start| 交叉轴开端 |
|center | 交叉轴居中 |
|flex-end | 交叉轴末端 |
**`flex-start`**：交叉轴开端![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-0c0b37d10a8f8c0c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)**`center`**：交叉轴的中间位置![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-061e9cc09cb5f63f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)**`flex-end`**：交叉轴的末端位置![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-6792e4b6e95674e5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
####2.1-4、`flexWrap`：包含内容
默认值是nowrap，不包裹所有内容

|值 |描述 |
|------|--------------------------------------------------------|
|nowrap|项目沿主轴方向布局，超出容器长度的部分不可见 |
|wrap |项目沿主轴布局所需长度大于容器总长度时，分行布局，所有项目内容都可见|
**`nowrap`**：不包裹内容![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-ec3f2759cd939a9f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)**`wrap`**：包裹内容![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-e6688c8d809b2ac1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###2.2 项目属性
####2.2-1、**`flex`**：布局权重
|值 |描述 |
|---|----------|
|>=0|项目占位权重|
`1:0`：flex=0的项目占用空间仅为内容所需空间，flex=1的项目会占据其余所有空间![代码：](http://upload-images.jianshu.io/upload_images/2041420-c0042f55b5e35aae.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)`2:1`：![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-66f5d156515cb523.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)`1:1:1:1`:![enter image description here](http://upload-images.jianshu.io/upload_images/2041420-f0efab3dd8fe1186.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
总结：
`flex:0` ：代表着有多大就占多少空间
`flex:n` :代表着在剩余空间中占的比例为（n/总空间）
####2.2-2、alignSelf：项目交叉轴方向**`自身`**对齐方式

|值 |描述|
|----------|---|
|flex-start|开端|
|center |居中|
|flex-end |末端|
####3 Layout的其他属性ayout除了flex属性之外，当然还有其他属性  

width: ReactPropTypes.number,
height: ReactPropTypes.number,
top: ReactPropTypes.number,
left: ReactPropTypes.number,
right: ReactPropTypes.number,
bottom: ReactPropTypes.number,
margin: ReactPropTypes.number,
marginVertical: ReactPropTypes.number,
marginHorizontal: ReactPropTypes.number,
marginTop: ReactPropTypes.number,
marginBottom: ReactPropTypes.number,
marginLeft: ReactPropTypes.number,
marginRight: ReactPropTypes.number,
padding: ReactPropTypes.number,
paddingVertical: ReactPropTypes.number,
paddingHorizontal: ReactPropTypes.number,
paddingTop: ReactPropTypes.number,
paddingBottom: ReactPropTypes.number,
paddingLeft: ReactPropTypes.number,
paddingRight: ReactPropTypes.number,
borderWidth: ReactPropTypes.number,
borderTopWidth: ReactPropTypes.number,
borderRightWidth: ReactPropTypes.number,
borderBottomWidth: ReactPropTypes.number,
borderLeftWidth: ReactPropTypes.number,

|属性 |类型 |描述 |
|---------------------|------|-----------------------------------|
|width |number|容器或者项目的宽度 |
|height |number|容器或者项目的高度 |
|top,bottom,left,right|number|在父容器的上下左右偏移量 |
|margin |number|留边，留边的空间不属于容器或者项目自身空间|
|marginHorizontal |number|水平方向留边 |
|marginVertical |number|垂直方向留边 |
|padding |number|填充，填充的空间输入容器或者项目自身空间 |
|paddingHorizontal |number|水平方向填充 |
|paddingVertical |number|垂直方向填充 |
|borderWidth |number|边界宽度 |
|position |enum |位置方式：absolute与relative |
 `position`：默认值为relative

|值 |描述 |
|--------|------|
|absolute|绝对布局|
|relative|相对布局|
react的默认位置方式是relative，项目是一个接一个排列下去的，absolute为绝对布局，一般会与left和top属性一起使用。有时候我们需要实现某些项目重叠起来，absolute属性就能发挥作用了，例如下图：react的基本组件暂时不支持以图片作为背景，所以这里的的转入是一个文本组件，而红色的圆形是一个图片组件，在iOS里面组件也可以作为容器，图片可以正常显示，但是在Android里面，可能存在些问题，如果使用组件作为容器都会出现图片变得好奇怪，所以就可以absoulte来解决问题了。代码如下：
```  转入

这里的View跟Android的View有点不一样，View是可以作为容器也可以作为项目，View作为容器还有其他很多属性，例如backgroundColor，borderWidth，borderColor，opacity等等，这里不一一介绍。

4 布局的尺寸说明

react native的宽高是不需要带单位的，那些width，height，padding，margin的赋值都直接是数字的，当你设定width:10，在IOS的话就是设置了10pt宽度，而在Android上面是10dp，在做项目时，辛勤的美工会帮我们标出所有UI控件的宽，高，边距等等，他们用的单位也是dp，所以赋值style中宽高时，直接填入数字即可。