Flex 是 W3C 提出的一种新的布局方案，可以非常方便的完成响应式页面布局，到目前为止几乎所有浏览器都支持，Flex 是 Flexible Box 的缩写，翻译过来是”弹性布局”的意思，下面一起来学习 Flex 布局的使用。

1. 基础概念
2. flex容器属性
3. flex项目属性
4. 总结

基础概念

采用 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容器属性

1. flex-direction：设置主轴的方向，可设置的值如下：

• row：默认值，设置主轴为水平方方向，起点在左边
• row-revarse：设置主轴为水平方向，起点在右边
• column：设置主轴为垂直方向，起点在上边
• column-revarse：设置主轴为垂直方向，起点在下边

2. flex-wrap：设置如何换行，可设置的值如下：

• nowrap：默认值，不换行
• wap：自动换行
• wrap-revarse：自动换行，在第一行的上一行

3. flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。

4. justify-content：设置项目在主轴上的对齐方式，可设置的值如下：

• flex-start：默认值，左对齐
• flex-end：右对齐
• center：居中对齐
• space-between：两端对齐
• space-around：每个项目两侧的间隔相等，与屏幕边缘的间隔是其他项目之间间隔的一半
• space-evenly：平均分布各个项目，与屏幕边缘的间隔与其他项目之间的间隔相等

5. align-items：设置项目在交叉轴上如何对齐，可设置的值如下：:默认值，如果没有项目未指定高度或设置为auto,则项目会占满整个容器的高度，可设置的值如下：

• stretch：默认值，如果没有项目未指定高度或设置为auto,则项目会占满整个容器的高度，下面图示中项目 1 就未指定高度，其余项目都指定了高度
  就未指定高度
• flex-start：设置与交叉轴的起点对齐
• flex-end：设置与交叉轴的结束点对齐
• center：设置与交叉轴的重点对齐
• baseline：设置项目与项目中第一行文字基线对齐

6. align-content：设置多根轴线的对齐方式，如果只有一个轴则该属性不生效，可设置的属性如下：

• stretch：默认值，轴线占满整个交叉轴
• flex-start：设置与与交叉轴的起点对齐
• flex-end：设置与交叉轴的终点对齐
• center：设置与交叉轴的中点对齐
• space-between：设置与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around：设置每根轴线两侧的间隔都相等，轴线与轴线的间隔是轴线到交叉轴边缘间隔的两倍

flex项目属性

1. order：默认值为0，设置项目的排列顺序，数值越小，排列越靠前，如下图所示：

2、flex-grow：设置项目的放大比例，默认值为0，如果存在剩余空间也不放大，如下图所示：

3. flex-shrink：设置项目的缩小比例，默认值为 1，如果项目空间不足，则项目将缩小，如下图所示：

上面图示中，当 flex-shrink 全设置为 0，每个项目不会缩放，所以第四个方块被挤出去了，而相应的设置 flex-shrink 为 1，则可以在空间不足是进行一定程度的缩放。

4. flex-basis：项目所占的主轴空间，如下图所示：

align-self：定义元素自身的对齐方式，该属性与 align-items 属性差不多，具体就不一一介绍了，直接上效果图如下：