Flexbox模型基础知识
Flexbox布局对于设计设计较复杂的页面非常有用，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变。同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。其功能主要有以下几点：
Ø 屏幕和浏览器窗口大学发生改变也可以灵活调整布局
Ø 指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调整伸缩项目大小
Ø 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间
Ø 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围
Ø 控制元素在页面上的布局方向
Ø 按照不同于文档对象模型所指定排序方式对屏幕上的元素重新排序，也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序
1.伸缩容器和伸缩项目
通过display属性显示地给一个元素设置为flex或inline-flex，即变成了一个伸缩容器。伸缩容器会为其内容创立新的伸缩格式化上下文，其中设置为flex的容器被渲染为一个块级元素，设置为inline-flex的容器渲染为一个行内元素。
2.伸缩容器的属性
伸缩流方向：即伸缩容器的主轴方向，决定了伸缩项目放置在伸缩容器的方向。主要通过flex-direction属性来设置，默认值为row。
伸缩行换行：主要用来设置伸缩容器的伸缩项目是单行还是多行显示，，以及决定侧轴的方向。通过flex-wrap属性来设置伸缩项目是否换行，默认值为nowrap。
伸缩方向与换行：是伸缩流方向与伸缩换行的结合物，即伸缩方向与换行属性flex-flow同时设定了伸缩流方向flex-direction和伸缩换行flex-wrap两个属性，决定了伸缩容器的主轴和侧轴。
主轴对齐：用来设置伸缩容器当前行伸缩项目在主轴方向的对齐方式，指定如何在伸缩项目之间分布伸缩容器额外空间。当一行上的锁伸缩项目不能伸缩或可伸缩但已达到最大长度时，这一属性才会对伸缩容器额外空间进行分配。通过justify-content来设置，默认值为flex-start。
侧轴对齐：伸缩项目可以在伸缩容器当前行的侧轴上进行对齐，类似主轴对齐，其对齐方式主要由align-items属性控制，以及属性align-self控制伸缩项目自身在侧轴的对齐方式。
堆栈伸缩行：用来定义伸缩容器中伸缩项目行在侧轴的对齐方式，类似侧轴对齐，只不过这是用来控制伸缩项目行在布局轴的堆放方式。通过属性align-content来控制。
3.伸缩项目的属性
显示顺序：伸缩项目默认显示顺序是遵循文档在源码中出现的先后顺序。可以通过属性order来改变其顺序。
伸缩性：伸缩布局决定性的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充伸缩容器外的空间，可以通过属性flex设置。Flex属性可以用来指定可伸缩长度的部件：扩展比率、收缩比率，以及伸缩基准值。当一个元素是伸缩项目时，flex属性将代替主轴长度属性决定元素的主轴长度。
在百度前端技术学院任务1-10中，就完全运用到了这个知识点，代码如下：
在此实例中，当屏幕宽度小于640px时，实现第四个元素前置到最前，而不改动各个元素的边框颜色与高度实现，从而实现了响应式布局效果。如图：
当宽度小于640px时：
总之，CSS3引入的flexbox布局模型，提供了一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小未知或者是动态的。