Flexible Box是什么？Flexible意为可伸缩的，Box意为盒子，可以理解为一种新式的盒模型——伸缩盒模型。由CSS3规范提出，这是在原有的大家非常熟悉的block, inline-block, inline的基础上延伸出的新一代布局模式。
浏览器兼容性
作为非常现实的开发者，是否对一个新技术进行关注，首先要考虑它的浏览器兼容性如何。我们的伸缩盒模型的浏览器兼容性看起来还是相当不错的。
可以看到，现代浏览器基本上都支持了，IE10开始也支持了（IE和Safari分别加-ms-和-webkit-前缀即可），移动端的支持情况也比较良好，唯一不支持的平台只有Opera了，咱不带他玩→_→
因此，奥巴马同志说：伸缩盒模型是好的，有前途的。（嗯嗯~）
伸缩盒基本概念
伸缩盒的最大特点或者说优点就在于它考虑到了现今高昂的房价和人民日益增长的住宅需求之间的矛盾，房屋面积是有限的，但是我们的伸缩盒能够最合理最高效地把房子分给大家。面积多了，就给大家伙多分点；面积小了，就让各位挤一挤少分点，总而言之不会让任何一个人露宿街头的（overflow）！
既然我们提到了房子和住户的关系，那么住户的排列自然需要沿一定的方向。对于块级元素来说，布局的延伸方向是自上而下的，也就是纵向。而对于行内元素来说，布局延伸方向是自左往右的，也就是横向。而伸缩盒呢，它的方向是可变的，既能纵向延伸，也能横向舒展，这取决于你的设置了。
伸缩盒模型基本术语
伸缩盒模型的思想和普通的块级元素和行内元素的布局思想有较大的不同，它引入了一些新的概念和术语，通过下面这张图来了解一下：
Flex container 伸缩盒容器
这就是用来分的房子，这是一间神奇的房子，要让它变得神奇，将display属性声明为flex或inline-flex即可~
Flex item 伸缩项
房子里的居民，他们都会占有自己应得的住房面积。
为了形象说明，我们用代码来解释。
新闻热点
疑难解答
