【连载】flex布局[概述之1]

页面布局指用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]

---