弹性盒布局（display:flex）

弹性盒布局（Flexible Box）是一种十分方便的，只需要依赖于CSS的样式就可以轻松实现响应式布局。弹性布局 flex 是CSS中 display 的一个属性值，通过在父容器上添加 display:flex;属性，便可以实现其子元素在父元素中的弹性布局，但要注意的是 display:flex; 这一条样式只会作用在添加这一属性的父容器和非隔代子容器上，换句话说，父容器上的 diaplay:flex; 属性并不会使其直系子元素中的子元素产生弹性布局。                           

通俗来讲，爹只能管得到自己的儿子、而管不到自己的孙子。如果想要在下一层中继续使用弹性布局，我们可以在相应的子元素上再次添加 display:flex; 属性来实现。弹性布局就像是在一个大盒子里摆放的几个小盒子，各自相对独立，其弹性盒的结构如图6-39所示。 从上图可以看出，弹性盒由容器，子元素和轴构成，并且默认情况下，子元素的排布方向与横轴的方向是一致的。弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于只要开发人员声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器就会负责完成实际的布局。该种方式的布局模型几乎在主流浏览器中都得到来支持。