微信小程序CSS Flexbox(弹性盒子)布局模块
容器中使用flexbox
flexbox的模型
当元素表现为 flex 框时，它们沿着两个轴来布局：
名词说明
- 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
- 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
- 设置了 display: flex 的父元素被称之为 flex 容器（flex container）。
- 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）
实例
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
含有三个项目的flex容器，其实就是一个普通的容器标签，在样式表中通过将他的display属性值设置为flex，就可以作为伸缩容器用了。
.flex-container {
display: flex;
}
flex容器的属性
flex-direction
定义容器在哪个方向上来排列子项目
| 可选值 | 含义 | 示例 |
|---|---|---|
| column | 垂直方向上排列，从上到下 |  |
| column-reverse | 也是垂直方向上，不过是从下到上的 |  |
| row | 水平方向上排列，从左到右 |  |
| row-reverse | 水平方向上排列，从右到左 |  |
flex-wrap
规定是否对flex的子项目进行换行操作，当子项目水平排列的时候，一行的项目过多是否对其进行换行的操作。
| 可选值 | 含义 | 示例 |
|---|---|---|
| wrap | 在必要的时候换行 |  |
| nowrap | 不进行换行，此值为默认值 |  |
| wrap-reverse | 必要的时候换行，不过要以相反的顺序换行，相当于从下到上换行 |  |
flex-flow
这个参数是对flex-wrap和flex-direction的组合参数，通过这一个属性可以设置两个属性的值
.flex-container {
display: flex;
flex-flow: row wrap;
}
通过设置flex-flow把flex-direction设置为row(水平布局)，flex-wrap设置为wrap(必要时换行)。
justify-content
控制flex子项目在主轴上的位置。
| 可选值 | 含义 | 示例 |
|---|---|---|
| center | 将flex的子项目向主轴上中心位置对齐 |  |
| flex-start | 将子项目向主轴开始位置对齐，即main start位置，本例中最左侧 |  |
| flex-end | 将子项目向主轴结束位置对齐，即main end位置，本例中最右侧 |  |
| space-around | 主轴方向上，在每个子项目的前后都加上空格 |  |
| space-between | 主轴方向上在两个子项目之间加上空格(头尾没有空格) |  |
align-items
控制flex子项目在交叉轴上的位置。
| 可选值 | 含义 | 示例 |
|---|---|---|
| center | 子项目向交叉轴中心位置对齐 |  |
| flex-start | 子项目向交叉轴起始位置对齐，即cross start位置，本例中最上方 |  |
| flex-end | 子项目向交叉轴结束位置对齐，即cross end位置，本例中最下方 |  |
| stretch | 交叉轴方向拉伸子项目填充容器，此值为默认值 |  |
| baseline | 子项目与基线（容器中心水平线）对齐 |  |
align-self
与align-item相同也是定义了交叉轴方向上的对齐方式，可选值也是相同的，但是这个属性用于子项目自身，它会覆盖掉父容器的align-item属性值。下面的例子中设置父容器的align-item=flex-start，单独设置子项目“2”align-self属性为center，效果图如下：
align-content
定义了子项目的填充方式，即flex容器内部子项目从哪个位置开始填充。该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap）。
| 可选值 | 含义 | 示例 |
|---|---|---|
| center | 所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离 |  |
| flex-start | 所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行 |  |
| flex-end | 所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐 |  |
| space-between | 所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐 |  |
| stretch | 拉伸所有行来填满剩余空间，剩余空间平均地分配给每一行，此值为默认值 |  |
子项目居中
justify-content(主轴方向) 和 align-items(交叉轴方向) 属性设置为center(居中)，就可以实现子项目的居中。在微信小程序中我只设置了justify-content就实现了居中，不知道是什么情况。
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
