图解CSS3核心技术与案例分析（第八章CSS3伸缩布局盒模型）

1、CSS3引入一种新的布局模式—-Flexbox布局（伸缩布局盒模型）
主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）
2、CSS2.1中定义了四种布局模式，由一个盒与其兄弟、祖先盒的关系决定其尺寸与位置的算法：
①块布局：呈现文档的布局模式
②行内布局：呈现文本的布局模式
③表格布局：用格子呈现2D数据的布局模式
④定位布局：能够直接定位元素的布局模式，定位元素基本与其他元素没有任何关系
3、Flexbox模型中的术语：
① 伸缩容器：通过display属性显式的给一个元素设置为flex或者inline-flex，这个容器就是一个伸缩容器。
其中设置为flex：块级元素
设置为inline-flex：行内元素
②伸缩项目：一个伸缩容器的内容具有零个以上的伸缩项目–伸缩容器的每个子元素都会成为一个伸缩项目
③伸缩容器的属性
a、伸缩流方向：指伸缩容器的主轴方向，其决定了伸缩项目放置在伸缩容器的方向，通过flex-direction属性来设置，其默认值是row
b、伸缩行换行：主要来设置伸缩容器的伸缩项目是单行显示还是多行显示，以及决定侧轴的方向，通过flex-wrap属性来设置项目是否换行，默认值是nowrap
c、伸缩方向和换行：是伸缩流方向与伸缩换行的结合物，flex-flow同时设定了flex-direction和flex-wrap两个属性
d、主轴对齐：
e、侧轴对齐：
f、堆栈伸缩行：
④伸缩项目的属性
伸缩项目都有一个主轴长度和一个侧轴长度，或者说一个伸缩项目的宽度或者高度取决于伸缩容器的轴