Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式，那么Flexbox能做什么，什么时候用得到，在什么情况下才用得到？Flexnbox怎么用，它是怎么工作的？我相信此时的我状态是一脸懵逼
谈起FlexBox(伸缩布局盒)相信大家都知道这个属性，同样也相信不少同学也在项目中用到，或者在用，也或许就像我一样只是了解，由于项目的需求，对兼容性的要求，放弃在项目中使用Flexbox布局，平常也就自己闲下来写写demo。所以对此属性仅仅我只能说是了解，至于我为什么要写这篇总结？很简单，下次跟别人吹牛逼谈到flexbox属性的时候我直接打开我的blog一目了然。
还是废话不多说了，下面一张图让我们来看看Flexbox的兼容性：
在这里给前端开发的小伙伴提供一个测试兼容性很不错的(见:url:http://caniuse.com 挺好实用的。
从上图可以一目了然的看到Flexbox对浏览器的支持度，所以当撇开低版本的兼容性时候，我们可以考虑用其flexbox伸缩盒模型来布局。
谈到Flexbox属性，说说自己的经历吧，从CSS 2.0 发展到如今的 CSS 3.0 慢慢开始被浏览器的认可，一开始听到flexbox这个伸缩盒模型布局时，一脸懵逼，到底是什么梗？…….然后默默的打开浏览器谷歌or百度看看是到底是什么梗，当时看资料时，我更是一脸懵逼，什么鬼，好复杂呀(Ps:此时我已经脑补了好几次当时的画面，这是一个悲伤的故事)；
下面来看看两张具体FlexBox的属性值汇总图，至于为什么是两张，从上面开始介绍过，从旧到新！具体如下：
既然上面说到了flexbox 的兼容性，以及它的属性值，同样的也相信不少同学对伸缩盒布局开始有一些了解，那么它能做什么呢？
Flexbox Layout(Flexible Box)模块，W3C官方称为CSS弹性盒子布局，是在CSS3中定义的一种新的布局模式。Flexbox可以控制在容器内的子元素的对齐方式、排列方式以及排序顺序，即使其子元素的尺寸是未知或者动态的情况下。弹性容器的主要特点就是能够调整其子元素的宽度或者高度以使其能在不同分辨率的屏幕下能用最好的方式去填充可用空间。
Flex布局的主要思想是让容器能使其子元素的宽高（或其他属性）能够以最好的方式去填充可用空间（主要是去适应不同的设备跟分辨率）。一个Flex弹性盒子能让子元素填充可用空间或者为了阻止子元素超出区域而进行收缩。那么下面来看几个简单的flexbox demo:
一个简单的flexbox九宫格布局 demo：
如何用flexbox实现一个垂水平居中直居中 demo：
如何用flexbox实现一个列表元素含ico布局 demo：
这里是一个iframe由于网络的原因暂时未引入
本文纯属个人总结，之所整理下来，是因为我看到felxbox的强大以及相信flexbox布局在以后的移动端会用得越来越多的。CSS本是一个灵活的东西，在于自己如何巧用，对于flexbox的layout方法，接下来我也会慢慢的挖掘。