Flex布局
flex 布局是继 标准流布局 、 浮动布局 、 定位布局 后的第四种布局方式。这种方式可以非常优雅的实现子元素居中或 均匀分布，甚至可以随着窗口缩放自动适应。 flex 布局在浏览器中存在一定的兼容性。但是在小程序中，是完全兼容 flex 布局的，并且微信官方也是推荐使用 flex 布局的。
一些基本概念
- 弹性容器：包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。
- 弹性项目(Flex item)：弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包复成匿名弹性 项目。也可以称为子容器。
- 轴(Axis)：每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的 那根轴称为侧轴(cross axis)。
- 方向(Direction)：可以通过 flex-direction 来确定主轴和侧轴的方向。
justify-content 设置在主轴上的排列方式
默认情况下，主轴的方向是从左到右。在主轴方向上，可以通过 justify-content 属性来设置他们的排列方式。排列 方式有以下几种：
- flex-start ：项目靠近父盒子的左侧。默认采用的就是这种排列方式。示例图如下：
- flex-end ：项目靠近父盒子的右侧。
- center ：所有项目会挨在一起在父盒子的中间位置。
- space-around ：项目沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。
- space-between ：项目沿主轴均匀分布，位于首尾两端的子容器与父容器紧紧挨着。
- space-evenly ：项目在主轴上均匀分布，收尾两端的自容器到父容器的距离跟自容器间的间距是一样的。
align-items设置在侧轴上的排列方式
默认情况下，侧轴的方向是从上到下。在侧轴方向上，可以通过 align-items 属性来设置他们的排列方式。排列方 式有以下几种：
- flex-start ：起始端对齐。默认就是这种对齐方式。
- flex-end ：末尾段对齐
- center ：中间对齐。
- stretch ：如果项目没有设置高度。那么子容器沿交叉轴方向的尺寸拉伸至与父容器一致。
- baseline ：基线对齐，这里的 baseline 默认是指首行文字，所有子容器向基线对齐，交叉轴起点到元素基线 距离最大的子容器将会与交叉轴起始端相切以确定基线
flex-direction更换主轴和侧轴方向
主轴默认的方向是从左到右，侧轴的方向默认是从上到下，当然也可以进行修改。可以通过 flex-direction 进行修 改。可以修改的参数为以下：
- row ：默认属性。从左到右。
- row-reverse ：从右到左。
- column ：从上到下。
- column-reverse ：从下到上。
flex-wrap改变排列的方式
- nowrap ：不换行。默认的。
- wrap ：换行。
- wrap-reverse ：换行，但是第一行会在下面。
align-content 确定排列的方式
- flex-start ：从上往下排列。
- flex-end ：末尾段对齐。
- center ：中点对齐。
- space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch ：默认方式，如果没有给元素设置高度，那么会占满整个交叉轴。
元素（子容器）的相关属性
flex-basis：
定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。
.item { flex-basis: <length> | auto; }
默认值：auto，即项目本来的大小, 这时候 item 的宽高取决于 width 或 height 的值。 当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex- shrink 配合使用才能发挥效果。 当 flex-basis 值为 0 时，是把该项目视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。 当 flex-basis 值为 auto 时，则跟根据尺寸的设定值(假如为 100px)，则这 100px 不会纳入剩余空间。
flex-grow：
设置元素是否需要扩大的比例。默认值为0，即如果存在剩余空间，也不放大。
flex-shrink：
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex属性：
flex属性是 flex-grow flex-shrink flex-basis 三个属性的简写。假设以上三个属性同样取默认值，则 flex 的默认值 是 0 1 auto 。 关于 flex 的取值，有以下几种方式：
- auto ：等价于 1 1 auto 。也就是允许增长，允许缩小，宽度为自动。
- none ：等价于 0 0 auto 。也就是不允许增长，不允许缩小，宽度为自动。
- 非负数字：这个数字表示的是 flex-grow 的值， flex-shrink 为1，表示允许缩小， flex-basis 为0%。可以认为 他就是把剩余的空间进行填充。比如以下代码是等价的：
.item {flex: 1;} .item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }
- 0 ：对应的三个值分别为 0 1 0% 。比如以下代码是等价的：
.item {flex: 0;} .item { flex-grow: 0; flex-shrink: 1; flex-basis: 0%; }