Flexbox让我们对过去无法真正达到的对布局的掌控更进了一层，过去我们浮动、清除浮动，与inline-block间的空格斗争，强制display:table，甚至用position:absolute来撑开内容。现在我们不需要依赖这些解决方案使得内容在不支持伸缩特性的浏览器可见。Flex的特性给我们所以构建的内容增加了一系列重要工具，但不是替代之前存在的东西，而是改进我们如今的构建方式。

Flexible boxes layout是W3C为了更好的在网页中排版和布局而设计出来的一个模块。它用来可以处理更加复杂的布局。它本质是盒模型的延伸，它可以进一步去规范容器中子元素盒模型之间的相对关系。

Flexbox是CSS3新增的一个功能特性，对于布局有很大方便之处。但浏览器支持力度各异，而且其规范也还在不断更新之中，也造成很多同学还不敢在实际项目中使用Flexbox的缘故。Philip Walton在他的Github中创建了Flexbugs库，用来回收Flexbox相关的Bug。主要宗旨是收集Flexbox跨浏览器存在的问题和解决方案。目标是让你使用Flexobx构建一个网站能得到你想要的效果，并且能在这里找到相应的解决方案。而这篇文章就是以创建Sticky footer布局为例，介绍了如何解决Flexbox在浏览器兼容的解决方案。

Flexbox是CSS3的一个新特性，这个特性可以帮助你实现很多以前实现起来困难的一些效果。比如会让你不会在为浮动感到困惑，不在为水平垂直居中烦恼，不在为自适应布局而感到凝惑。自从Flexbox出现，但也给前端开发人员带很语法版本的困惑，在整个发展过程中经历了三个不同的语法版本，造成前端开发人员不知道怎么使用，今天根据Sfioritto的《THE ULTIMATE FLEXBOX CHEAT SHEET》文章整理了一份Flexbox使用查询列表清单。希望对初学者有所帮助。

新css属性为我们提供了更加便捷的网页布局方式。来自微软的thomas lewis将带你认识去Grid Alignment，Flexibox Box以及Multi-column Layout这三大领域。这篇文章最早出现在 the April 2012 issue (226)这期的.net杂志上-这杂志是面向网页设计者以及开发者，全球销量最高的杂志。按照以往来说，用CSS来布局看起来总是一样非常繁杂的工作。然而，随着一个个新标准的推出，网页设计者已经能够实现非常轻松地进行布局工作了。

主流的浏览器，在W3C的推动下，已经开始实现多种新型的布局方式，而且我们现在已经可以开始使用了。举个例子，W3C开始把CSS3 Multicolumn Layout Module考虑进来。这就意味着W3C非常愿意看到浏览器在将来能够对上面的模块实现出来。

大家都知道，css有着奇妙的特性，然而让人失望的是，css对基本页面布局上的支持有所欠缺。但是这种情况正在得到改变，更多的动态页面正是由css所支持的，正如peter gasston所说的。这是一篇关于css布局且具有前瞻性的 文章。在这里，我能够保证在数年之后，css3必定能够引领潮流。在这篇文章当中，我将为大家从优秀实用到纯粹理论阶段中介绍有关css布局的工具，也许在这些阶段中你不一定用得到他们，（至少不是现在），但仍然还很有必要去了解，通过这样可以透过迷雾，看清未来。

伸缩盒模型（flexbox）是一个新的盒子模型，主要优化了UI布局。作为实际布局的第一个CSS模块（浮动真的应该主要用来制作文本围绕图片这样的效果），它使很多任务容易多。Flexbox的功能主要包手：简单使用一个元素居中（包括水平垂直居中），可以让扩大和收缩元素来填充容器的可利用空间，可以改变源码顺序独立布局，以及还有其他的一些功能。Flexbox一直都存在。它最开始作为Mozilla XUL的一个功能，被用来制作程序界面，如Firefox的工具栏，就多次使用这个属性。该规范最近才达到稳定，在主要的浏览器对新的版本有相当完整的支持。然而有一些事项需要注意。在IE中规范更改了他的语法，因此你将需要使用一个稍微不同的语法。Chrome当前版本仍然需要添加前缀“-webkit-”，而Firefox和Safari仍然还在使用最老版本的语法。Firefox已经更新为最新的规范，但是，在实际项目中目前最好还先别使用最新的规范，直到它被认为没有bug了或者更稳定了，在使用。在这之前，Firefox还是使用最老的语法规范。根据David Storey的《Designing CSS Layouts With Flexbox Is As Easy As Pie》所译，再次向大家介绍了Flexbox的使用，以及罗列出Flexbox布局模块在各规范下的属性对比。

经过这一系列对Flexbox的介绍，我想大家对Flexbox在布局中的使用以及其强大功能特性给我们布局带来的方便性都有所了解。话又说回来，虽然Flexbox功能强大（特别是弹性布局），但还是很多同学不敢使用，也不想尝试性使用。我想主要原因出于他的语法版本众多，浏览器对其兼容性等。在《“老”的Flexbox和“新”的Flexbox》一文中，让我们了解了如何识别Flexbox的语法版本，而在《使用Flexbox：新旧语法混用实现最佳浏览器兼容》和《跨浏览器的Flexbox》能实现浏览器的完美兼容性。既然有方案能让Flexbox布局模块在众多浏览器下实现兼容，那我们今天要说什么呢？从浏览器的兼容性中可以看出，Flexbox布局模块的最新语法“display:flex”在Chrom25.0+、Opera12.1，Firefox22+、IE11+都得到了支持，但我们还有很多用户并不像我们这些前端人员会及时更新自己所用浏览器的版本。那么就存在Flexbox的兼容性问题。说了一大堆的废话，还未进来主题，真有点对不住读者，接下来也不浪费大家宝贵时间，我们一起进入今天的主题——IE10中的Flexible Box("Flexbox")布局

Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。（这里我们称为Flex）。Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小他们以防止溢出容器。最重要的是，Flexbox布局方向不可预知，他不像常规的布局（块就是从上到下，内联就从左到右）。而那些常规的适合页面布局，但对于支持大型或者杂的应用程序（特别是当他涉及到取向改变、缩放、拉伸和收缩等）就缺乏灵活性。根据Chris Coyier的《A Complete Guide to Flexbox》所译,再次向大家系统介绍了Flexbox模块中的各个术语，以及属性、属性参数所起的作用，并附上几个简单的实例与大家理论与实战相结合，实打实的了解清楚Flexbo模块。