页面布局指用CSS将页面划分成不同的内容展示，区域以满足人们对页面的感官和互动需求。
布局方式又有：
【盒状模式】:依赖display + position + float 属性实现。
【弹性模式】:flex
这里写下弹性模式 布局。
浏览器兼容性：
b_support.png
在浏览器支持的范围内， 盒状布局 和弹性布局可以“组合”使用。
注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
任何容器都可以指定为弹性布局 flex
/* 块级元素的指定方式 */
.panel{ display:flex; }
/* 行内元素的指定方式 */
.panel{ display: inline-flex; }
/* Webkit 内核的浏览器，必须加上-webkit前缀 */
.panel{ display: -webkit-flex; display: flex; }
容器指定为flex布局后就可以使用下面六个属性来进行布局：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
下一篇:【连载】flex布局[flex-direction 之 2]
