一、介绍：
1)弹性盒也叫伸缩布局盒模型
它是css3引入的一种新的布局模式——flexbox布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局。相比之前的布局方式，更便利于开发。
2)主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充可用空间，或缩小他们以防止溢出容器。
3)专业术语解释
1、主轴-水平方向或者X轴
2、侧轴-垂直方向或者Y轴
3、伸缩容器（父元素）和伸缩项目（子元素）
二、主要功能
1、 屏幕和浏览器窗口大小发生变化也可以灵活调整布局；
2、 制定伸缩项目沿着主轴或者侧轴按比例分配额外空间，从而调整伸缩项目的大小；
3、 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
4、 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
5、 控制元素在页面上的布局方向；
6、 按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。
三、基本布局
1、 定义弹性盒：
声明伸缩容器（父元素）：display：flex；需要加前缀
display：-webkit-flex；
display：-moz-flex；
display：-ms-flex；
display：-o-flex；
display：flex；
2、 伸缩容器属性：
2.1、伸缩流方向 flex-direction 主要用来创建主轴，定义伸缩项目在伸缩容器中的方向
row：从左向右
row-reverse：与row相反；
column：从上到下
column-reverse：与column相反；
2.2、伸缩换行 flex-wrap：
nowrap 不换行 默认值，不管超出还是不超出都不会换行
wrap 换行 一旦伸缩项目超出伸缩容器，那么就会换行
wrap-reverse 换行反向 主轴水平时，上下反向，主轴垂直时，左右反向；
2.3、伸缩流方向与换行 flex-flow 缩写形式。
flex-flow：flex-direction flex-wrap;
两个值同时定义或者单独定义都生效
2.4、主轴对齐 justify-content 主要用来定义伸缩项目沿主轴线的对齐方式；
flex-start：伸缩项目向一行的起始位置靠齐；
flex-end：伸缩项目向一行的结束位置靠齐；
center：伸缩项目向一行的中间位置靠齐；
space-between：伸缩项目会平均的分布在行里；
space-around：伸缩项目会平均的分布在行里，两端保留一半的空间；
2.5、侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式
flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边；
flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边；
center：伸缩项目的外边距盒 在该行的侧轴上居中放置；
baseline：伸缩项目根据伸缩项目的基线对齐；
stretch：伸缩项目拉伸填充整个伸缩容器。
