1.背景介绍

网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性，它对于那些特殊布局非常不方便。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

2.知识剖析

1、什么是flex布局？

flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。块级元素只需要display属性为flex即可。行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }。Webkit 内核的浏览器，必须加上-webkit前缀。

2、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。

3、容器的属性

display：将元素定义为容器，其子元素自动成为弹性项目。

flex-direction：该属性指定内部元素在flex中如何布局，定义了主轴的方向。

flex-flow：是flex-direction和flex-wrap的简写。

justify-conten：用于指定主轴（水平方向）上flex指向的对齐方式。

align-items：用于指定侧轴（垂直方向）上flex指向的对齐方式。

align-content：该属性只作用于多行的属性下，用于多行的对齐方式。

4、项目的属性

order：该属性用来排列顺序，数值越小，越靠前，可以为负数，默认为0，数值相同时按照源码中的顺序排列。

flex-grow：项目的拉伸因子，当有剩余空间时，项目会根据各自的拉伸因子进行拉伸。默认为0（不拉伸），负值无效。

flex-shrink：项目的缩小比例，默认为1，负值无效。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex：none。是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

兼容问题：pc端兼容性相对较差，IE要10甚至11以上才能更好的兼容。

现在flex已获得的大部分浏览器的支持，可以去查看浏览器的内核可以知道是否支持。。

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */

display: -moz-box; /* OLD - Firefox 19- H5不用考虑 */

display: -mz-flexbox; /* TWEENER IE 10 */

display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

5.代码实战

6.拓展思考

css传统布局：display 属性 + position属性 + float属性

参考文献-关于 CSS 布局——传统的布局解决方案：https://www.jianshu.com/p/0758ea7474d2

7.参考文献

参考文献-Flex 布局教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

问题1：aline-items和align-content的区别是什么？

答：align-items适用于单行项目时使用；
align-content适用于多行项目时使用，且align-content有space-between和space-around属性

问题2：display：grid和flex哪个好？

答：看你的具体需求，它们区别如下：

Grid
Grid在全局布局方面大胜，是元帅
网格=>二维布局，以布局为基础，布局自适应，多维联动厉害
独立源：可以设置区域及项目选择区域而与书写文档脱钩=>好维护

Flex
Flex在局部布局方面大胜，是大将
弹性=>一维(多行1.5维)，以内容为基础，内容自适应，单行联动厉害
order:半个独立源
排版方向或内容排版方面绝对的高手
弹性特点：没有方向，空间自由分配，自动对齐

问题3：为什么我的弹性盒子会影响到整体布局，他的特性是什么？

答：弹性盒子影响整体布局，应该是你的某些参数用错或者冲突，弹性盒子本身不会有问题，顾名思义，他的特性就是很弹性，很灵活，相比较传统布局使用更加方便简洁