前言
随着电子产品的快速迭代，传统的前端布局越来越难以是配多端的屏幕显示，无论是table布局还是float布局在移动端适配上都有着很大的局限性。09年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局，flex的应用可以极大程度上补充传统布局的不足之处。
flex布局是什么
Flex是flex box的缩写意为弹性布局，用来为盒状模型提供最大的灵活性。 特点：采用flex布局的元素成为flex容器，他的所有子元素自动成为容器的成员。 借用腾讯云社区的一张图
由图中我们可以看出flex布局其实是将我们的元素看成一个一左上角为原点的直角坐标系。
如何使用flex布局
- 主轴（flex布局以主轴和交叉轴为主的。理解他们是掌握flex布局的基础。）主轴由flex-direction定义他可以去四个值：row row-reverse column column-reverse
- row 或者 row-reverse，你的主轴将沿着 inline 方向延伸。
- column 或者 column-reverse，你的主轴会沿着上下方向延伸,及block方式。
- 交叉轴垂直于主轴，所以如果你的flex-direction (主轴) 设成了 row row-reverse则交叉轴为垂直方向
- 如果flex-direction (主轴) 设成了 column column-reverse则交叉轴为水平方向。
- 按需固定元素位置（容器内元素属性设置）
- justify-content - 控制主轴上所有 flex 项目的对齐（相比margin auto要方便的多）。
- align-items - 控制交叉轴上所有 flex 项目的对齐（有了这个属性不用再考虑父元素有多高top是多少了）。
- align-self - 控制交叉轴上的单个 flex 项目的对齐。
- align-content - 控制“多条主轴”的 flex 项目在交叉轴的对齐（要使得 align-content 生效，flex 容器的height要大于 flex 项目的可视内容。然后它会将所有的 flex 项目打包成一块之后再对齐剩下的空间）。
- 应对页面弹性伸缩（容器内元素属性设置）
- flex-shrink/grow: 比例缩小/放大
flex-grow:flex-grow属性默认等于0，即使用本来的宽度，不拉伸。等于1时，就表示该项目宽度拉伸，占据当前行的所有剩余宽度。
flex-shrink:flex-shrink的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小。 - flex-basis（初始值：auto）:指定了item在flex布局中的初始大小（前提是不改变盒模型的box-sizing），所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。另外其设置的优先级高于width。
- flex 属性总结（这里只做简要说明，详细请查看mdn文档）
- 容器属性 flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式
flex-direction:属性决定主轴的方向
flex-wrap:属性决定轴线排不下，如何换行
justify-content:属性决定项目在主轴上的对齐方式
align-items:属性决定项目在交叉轴上的对齐方式
align-content:属性定义了多根轴线的对齐方式（一条轴线时不起作用） - 项目的属性
order:定义项目的排列项目
flex-grow:定义项目的放大
flex-shrink:定义项目的缩小
flex-basis:定义项目的基本大小
flex:属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
align-self:单个项目定义的属性，可覆盖align-items属性。
为什么要使用flex布局
- flex布局的思想简单明了初学者很容易上手
- 他可以很好的适应多端布局（响应各种页面）
- 为盒状模型提供最大的灵活性
总结
随着当前电子产品的快速发展，适应各种设备的显示已成为我们前端开发者必备的技能。5-10年前我们只用考虑几种的设备适配，到如今的十几种细分来说甚至几十种，这就需要我们掌握一种可以轻松实现页面响应式布局的技能，而flex便可以满足我们当前的需求。
注意
Internet Explorer 10： 使用-ms-前缀；
UC浏览器： 使用-webkit-前缀。
现在，IE11 已经支持display: flex，但是在使用的时候会有一些bug。
