Flex布局使用（含实例代码）

一、什么是Flex布局？

Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。

任何一个容器都可以指定为Flex 布局。

1 2 3

.box{     display:flex; }

　　行内元素也可以使用Flex布局。

1 2 3

.box{     display:inline-flex; }

　　webkit内核的浏览器，必需加上-webkit前缀

1 2 3 4

.box{     display:-webkit-flex;     display:flex; }

　　需要注意的是，设为flex布局以后，子元素的float、clear和vertical-align属性将失效

二、Flex布局的优势：

可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，可以很安全地使用该项功能。

三、Flex布局相关属性：https://www.jianshu.com/p/5c6f761ff769