Flex 是 W3C 提出的一种新的布局方案，可以非常方便的完成响应式页面布局，到目前为止几乎所有浏览器都支持，Flex 是 Flexible Box 的缩写，翻译过来是 "弹性布局" 的意思，下面一起来学习 Flex 布局的使用。
- 基础概念
- flex 容器属性
- flex 项目属性
- 总结
基础概念#
采用 Flex 布局的元素称为 Flex 容器，所有子元素将自动成为容器成员，也可以称之为 Flex 项目，也就是该 Flex 布局的子 View , 下面是 Flex 布局默认设置下的示意图：
如上图所示，默认的 Flex 容器的存在两个轴：水平的主轴 (main axis) 和垂直的交叉轴 (cross axis)，主轴和交叉轴的方向不是绝对的，而是会因为设置的不同而不同，下面是与主轴和交叉轴相关的几个位置：
- 主轴起始点 (main start): 主轴的开始位置
- 主轴的结束点 (main end): 主轴的结束位置
- 主轴空间 (main size): 单个 Flex 项目占据的主轴空间
- 交叉轴的起始点 (cross start): 交叉轴的起始点
- 交叉轴的结束点 (cross end): 交叉轴的结束点
- 交叉轴空间 (cross size): 单个 Flex 项目占据的交叉轴空间
flex 容器属性#
- flex-direction：设置主轴的方向，可设置的值如下：
- row：默认值，设置主轴为水平方方向，起点在左边
- row-revarse：设置主轴为水平方向，起点在右边
- column：设置主轴为垂直方向，起点在上边
- column-revarse：设置主轴为垂直方向，起点在下边
- flex-wrap：设置如何换行，可设置的值如下：
- nowrap：默认值，不换行
- wap：自动换行
- wrap-revarse：自动换行，在第一行的上一行
-
flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。
-
justify-content：设置项目在主轴上的对齐方式，可设置的值如下：
- flex-start：默认值，左对齐
- flex-end：右对齐
- center：居中对齐
- space-between：两端对齐
- space-around：每个项目两侧的间隔相等，与屏幕边缘的间隔是其他项目之间间隔的一半
- space-evenly：平均分布各个项目，与屏幕边缘的间隔与其他项目之间的间隔相等
- align-items：设置项目在交叉轴上如何对齐，可设置的值如下：: 默认值，如果没有项目未指定高度或设置为 auto, 则项目会占满整个容器的高度，可设置的值如下：
- stretch：默认值，如果没有项目未指定高度或设置为 auto, 则项目会占满整个容器的高度，下面图示中项目 1 就未指定高度，其余项目都指定了高度
就未指定高度 - flex-start：设置与交叉轴的起点对齐
- flex-end：设置与交叉轴的结束点对齐
- center：设置与交叉轴的重点对齐
- baseline：设置项目与项目中第一行文字基线对齐
- align-content：设置多根轴线的对齐方式，如果只有一个轴则该属性不生效，可设置的属性如下：
- stretch：默认值，轴线占满整个交叉轴
- flex-start：设置与与交叉轴的起点对齐
- flex-end：设置与交叉轴的终点对齐
- center：设置与交叉轴的中点对齐
- space-between：设置与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around：设置每根轴线两侧的间隔都相等，轴线与轴线的间隔是轴线到交叉轴边缘间隔的两倍
flex 项目属性#
- order：默认值为 0，设置项目的排列顺序，数值越小，排列越靠前，如下图所示：
- flex-grow：设置项目的放大比例，默认值为 0，如果存在剩余空间也不放大，如下图所示：
- flex-shrink：设置项目的缩小比例，默认值为 1，如果项目空间不足，则项目将缩小，如下图所示：
上面图示中，当 flex-shrink 全设置为 0，每个项目不会缩放，所以第四个方块被挤出去了，而相应的设置 flex-shrink 为 1，则可以在空间不足是进行一定程度的缩放。
- flex-basis：项目所占的主轴空间，如下图所示：
- align-self：定义元素自身的对齐方式，该属性与 align-items 属性差不多，具体就不一一介绍了，直接上效果图如下：
上面的效果中设置 auto 会跟随 flex 容器中 align-items 的设置。
- flex：flex 是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto，这里就不在贴效果图了。
总结#
最近尝试了一下微信小程序，感觉开发起来难度也不是很大，觉得本篇文章的内容也是微信小程序中最重要的内容了，本来打算继续进行小程序系列的学习，但是看了一下后面的内容无非就是小程序各个组件的使用了，如果有其他项目的开发经验，实在没必要一个组件一个组件去验证学习，所以小程序的学习就到此为止，最后，说一点微信小程序最重要的我觉得还是 Flex 布局。