现在跨平台的js+native的框架在手机应用中越来越流行，例如facebook的reactnative框架和阿里巴巴的weex框架。在应用这些框架的时候一个很重要的问题就是布局问题，手机的屏幕尺寸不定，iOS和android原生应用的布局机制又不一致，鉴于此reactnative也启用css3中加入的新特性flex来解决跨平台手机应用的布局问题，而没有采用传统的网页布局方式。reactnative和网页中启用的flex布局所应用的知识点完全一致。所以下面简单介绍一下flex布局相关问题，reactnative相关知识就不赘述。
一、基本概念
任何容器都可以指定为flex布局，采用Flex布局的元素称为Flex容器（flex container），其所有子项目自动成为容器成员，记Flex 项目（flex item），简称“项目”。
二、容器属性
| 属性名 | 值 | 备注 |
|---|---|---|
| flex-direction | row（默认值） | 主轴为水平方向，起点在左端。 |
| row-reverse | 主轴为水平方向，起点在右端。 | |
| column | 主轴为垂直方向，起点在上沿。 | |
| column-reverse | 主轴为垂直方向，起点在下沿。 | |
| flex-wrap | nowrap（默认） | 不换行 |
| wrap | 换行，第一行在上方。 | |
| wrap-reverse | 换行，第一行在下方。 | |
| flex-flow | <flex-direction> 或者 <flex-wrap> | flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap |
| justify-content | flex-start（默认值） | 左对齐 |
| flex-end | 右对齐 | |
| center | 居中 | |
| space-between | 两端对齐，项目之间的间隔都相等。 | |
| space-around | 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 | |
| align-items | flex-start | 交叉轴的起点对齐。 |
| flex-end | 交叉轴的终点对齐。 | |
| center | 交叉轴的中点对齐。 | |
| baseline | 项目的第一行文字的基线对齐。 | |
| stretch（默认值） | 如果项目未设置高度或设为auto，将占满整个容器的高度。 | |
| align-content | flex-start | 交叉轴的终点对齐。 |
| flex-end | 与交叉轴的终点对齐。 | |
| center | 与交叉轴的中点对齐。 | |
| space-between | 与交叉轴两端对齐，轴线之间的间隔平均分布。 | |
| space-around | 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 | |
| stretch（默认值） | 轴线占满整个交叉轴。 |
容器属性有六个，如上表所示。其实准确的说应该是5个，flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式。其实际作用可以结合下面的示例代码，用浏览器的调试器更换5个属性不同的取值，来看显示效果，已达到更好的感性认识，加深对各个属性值的作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
display: flex;
width: 250px;
height: 300px;
flex-direction:row;
align-items: flex-start;
justify-content: space-around;
flex-wrap: wrap;
align-content: stretch;
}
.item{
width:40px;
height:30px;
background: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
值得注意的是由图表我们可以发现align-content 和 justify-content 的属性值取值是相同的，其含义也是类似的。justify-content 作用于每一行内的每一项对齐方式，也就是其水平方向的对齐方式，而align-content 是每一行在垂直方向上的对齐方式（注意：这里说每一行的前提是flex-direction的值设置的方向是水平方向，如果flex-direction设置是垂直方向，那么这里的“每一行”就必须说成是“每一列”了，justify-content 和 align-content 相对应的方向都要相应做更改。）
还有一点要注意的如果项目只有一根轴线，align-content属性不起作用，按照上面的程序flex-direction设置是水平方向，也就是说必须要是多行的情况下align-content属性才起作用，也就是item的数量和尺寸足够换行，并且flex-wrap 的属性不能设置成nowrap（默认值）。
三、项目的属性
| 属性名 | 值 | 备注 |
|---|---|---|
| order | <integer> | 定义项目的排列顺序。数值越小，排列越靠前，默认为0。 |
| flex-grow | <integer> | 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 |
| flex-shrink | <number> | 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 |
| flex-basis | <length> 或 auto | 定义了在分配多余空间之前，项目占据的主轴空间（main size） （默认值为auto） |
| flex | none 或者 [ <'flex-grow'> <'flex-shrink'>? 或者 <'flex-basis'> ] | flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 |
| align-self | auto（默认值） | align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。除了auto，其他都与align-items属性完全一致 |
| flex-start | 交叉轴的起点对齐。 | |
| flex-end | 交叉轴的终点对齐。 | |
| center | 交叉轴的中点对齐。 | |
| baseline | 项目的第一行文字的基线对齐。 | |
| stretch（默认值） | 如果项目未设置高度或设为auto，将占满整个容器的高度。 |
这里的示例代码从略，读者可以根据上面的代码自行更改和调试，上面属性主要是定义指定项目的顺序、大小和对齐方式的。
以上内容主要参考前端大神阮一峰的教程《Flex 布局教程：语法篇》如果要进行更深入的拓展可以参考其另外一篇文章《Flex 布局教程：实例篇》。由于其flex布局涉及的属性和取值比较多，最后附上从网上找的方便记忆的口诀图片。
附：
