伸缩盒模型（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布局模块在各规范下的属性对比。

CSS中的等高布局、水平垂直居中以及置顶页脚(Sticky Footer)这几个效果(我喜欢把他们说成是CSS效果，而不喜欢说其是问题)并不是常陌生，而且很多同学都似乎有碰到过，也经常体验过。甚至在很多前端面试中也常被考官问到，有的时候还直接被考官给秒杀了。早前在水平垂直居中系列、八种创建等高列布局和如何将页脚固定在页面底部几篇文章中也或多或少介绍过。今天老调重谈，用几种新方法和大家探讨这几个效果，希望能帮助大家开拓思维。

虽然使用 CSS 创建居中效果需要耍一些花招，特别是垂直居中效果，但我认为由此生出的诋毁，对于 CSS 则是不公平的。实际上我们有太多的方式使用 CSS 创建居中效果了，而且作为一名前端开发者，你真的有必要对其中的原理了解一二。写这篇文章的目的不是为了向各位解释这些方法的工作原理，而是介绍将这些方法编写为 Sass mixin 的方式，继而将它们复用到各类项目中。如果你还不熟悉使用 CSS 创建居中效果的方法，我建议你仔细阅读以下这篇文章：Centering In CSS: A Complete Guide。

垂直居中、水平居中或者说水平垂直居中的方案很多种，但在实际当中，不管是具体业务或者入职面试，很多同学都有失足之处。那么使用CSS实现居中效果困难吗？显然不是。实际上有许多方法可以实现居中效果，但在具体情况中，我们往往无法判断哪种方法最合适。@Chris Coyier整理了一篇有关于居中的实现方法的文章，可以说这篇文章涵盖了各式各样的居中方法，希望这篇文章能帮你解决选择困难症~

让一个元素水平居中对于CSS来说非常简单：如果是一个内联元素，我们可以在他的父元素上设置text-align:center;；如果是一个块元素，我们可以使用margin:auto;。然而，只要一想到让一个元素垂直居中，让人死的心都有了。多年来，垂直居中已成为CSS的不朽神话，也是前端专业人士群体中的一个内部笑话。