Flex 布局

这只是一个介绍flex布局的中转站，作为盒端开发人员，这个知识点根本就用不上（因为盒子上的浏览器不支持，也就平时自己写点小东西玩的时候用到了）。

只是用来简单布局的话，建议直接查手册，我常用的手册网址：http://www.runoob.com/w3cnote/flex-grammar.html

有个注意点：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

要是遇到问题，那就针对问题在网上搜一下，个人认为这样比较高效。

 

扩展

这次学习vue，把手上的项目拿来改造，参考别人的布局代码的时候，发现display:box的作用和flex很像，就去搜索了一下。

结果：

1、同样是弹性盒模型

2、前者是flex2012年的语法，也将是以后的标准语法，大部分浏览器已经实现了无前缀版本。后者是2009年的语法，已经过时，是需要加上对应前缀的。

3、flex是最新的，但是在实际的浏览器测试中，display: flex 不能完全替代display: -webkit-box

想深入了解一下的戳链接：

CSS3 display:flex和display:box有什么区别？