昨晚听了一个微信小程序的公开课，在布局时，无意间看到了弹性盒子的身影，之前只知道box-flex,但是由于兼容性问题，使用者很少，毕竟市面上的大多浏览器都必须加前缀才能实现，也就意味着多写几行代码，其实这都不是事，可是大部分CXY都比较懒，能一行代码搞定的事绝不写两行。废话有点多了。转回正题。

我学东西遵循着，是什么？为什么？怎么用？有什么问题？下面我就按这四个方向深入聊聊，水平有限，有问题的地方请多多指教。。

一、是什么？

相信大多数CXY遇到问题，不知是骡子还是马，都会习惯性谷歌之，我也不例外，真是不谷不知道，一谷吓一跳。倒不是该属性本身，而是此属性作为导火索，让我了解了下CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)。对于我这样的流体布局控而言，这种盒子模型的出现就好比打麻将杠上开花杠到绝张边七条，让人兴奋不已。在国外，弹性盒子模型早在09年就开始被提及，研究，与应用。

css3的弹性盒模型是一个可以让你告别浮动、完美实现垂直水平居中的新特性。Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将伸展大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。

二、为什么？

上面提到过，布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

--先吃饭，再继续

浅谈css3弹性盒子模型