CSS3弹性伸缩布局盒（Flexible Box）模型

1.前言

CSS3中引入的布局模式Flexbox布局，主要是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（适配所有类型的现实设备和屏幕大小）。
Flexbox布局功能主要有以下几点：

• 屏幕和浏览器窗口大小改变时可以灵活调整布局
• 指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），来调整项目大小。（注意，额外空间的概念要理清楚！）
• 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间
• 指定如何将垂直于元素布局周的额外空间分布到该元素的周围
• 控制元素在页面上的布局方向
• 可以在浏览器渲染周不按照文档流先后顺序重排伸缩项目顺序

2.Flexbox模型中术语：

1.主轴和侧轴

- 主轴、主轴方向：伸缩容器的主轴，伸缩项目主要沿着这条轴进行布局，但是！不一定是水平的，取决于justify-content属性，取值为column时，主轴方向为纵向的。
- 主轴起点、主轴终点：伸缩项目放置在伸缩容器内从主轴起点向主轴终点方向。
- 主轴长度、主轴长度属性：伸缩项目在主轴方向的宽度或高度就是项目的主轴长度，哪个宽度或高度属性对着主轴就由它决定。

• 侧轴、侧轴方向：与主轴垂直的方向，取决于主轴方向。
• 侧轴起点、侧轴终点：填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
• 侧轴长度、侧轴长度属性：伸缩项目在侧轴方向的宽度或高度就是项目的侧轴长度，哪个宽度或高度属性对着侧轴就由它决定。

2.伸缩容器和伸缩项目：

伸缩容器：通过display属性显示地给一个元素设置为flex或inline-flex，这个容器就是一个伸缩容器!设置为flex的容器被渲染为一个块级元素，设置为inline-flex的容器将被渲染为一个行内元素。

伸缩项目：一个伸缩容器的内容具有零个以上的伸缩项目，伸缩容器的每个子元素都会成为一个伸缩项目。

3.伸缩容器的属性：

1. 伸缩流方向：指伸缩容器的主轴方向，决定了伸缩项目放置在伸缩容器的方向。通过flex-direction属性来设置，默认值为row。伸缩流方向和书写模式有关系，伸缩项目根据书写模式的方向布局。
2. 伸缩行换行：设置伸缩容器的伸缩项目是单行显示还是多行显示&