“老”的Flexbox和“新”的Flexbox

本文由大漠根据Chris Coyier的《“Old” Flexbox and “New” Flexbox》所译，整个译文带有咱们本身的理解与思想，若是译得很差或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://css-tricks.com/old-flexbox-and-new-flexbox，以及做者相关信息

——做者：Chris Coyier

——译者：大漠

你们都清楚的知道:“Flexbox”（全称：CSS Flexible Box Layout Module）在过去的三年中经历了许多变化。变化都达到了规范以及什么样的浏览器支持Flexbox。

如何辨别

 

若是你使用google搜索Flexbox，你会发现不少过期的信息。这里将告诉你如何迅速的辨别你须要的信息。

若是你正在查找有关于Flexbox的博客资料，你看到了“display:box;”或者“box-{*}”属性，那么你看的正是2009年版本的Flexbox。

若是你正在查找有关于Flexbox的博客资料，你看到了“display:flexbox;”或者“flex()”函数，那么你看的正是2011年版本的Flexbox。

若是你正在查找有关于Flexbox的博客资料，你看到了“display:flex;”和“flex-{*}”属性，那么你查看的是当前（在写此文时）的规范。

过期的教程与例子

这些东西在建立的时候都很是的棒，但对于如今而言有些过期。

Flexie——一个javascript脚本，使用的是2009年的旧版本语法。

2011年Richard Shepherd在Smashingmagazine.com写了篇文章。文章附带的提到了2011年版本的语法，但更侧重于2009年旧版本的语法。

Stephen Hay早前就写了一篇有关于Flexbox的教程，他的这篇教程介绍的也是2009年老版本语法，随后他对2011版本Flexbox也作了一个跟踪，而且分享了出来。

我第一次接触Flexbox是来自于Paul Irish分享的教程，他使用的是2009年语法版本。顶部介绍了Flexbox的特性，而且连接到Stephen Hay介绍2011年语法版本的文章中。

支持

浏览器支持条款变得有点复杂。

2009年旧版本语法获得浏览器较好的支持：Chrome、Firefox2+、Safari3.1+ ...除IE9和Opera几乎全部浏览器都支持。我所说的“支持”，实际的实现与支持会有点不一样（所以，有些须要重写）。

尽管旧的语法获得很好的支持，但使用旧的语法并非一个聪明的作法。旧的规范始终要淘汰。浏览器在将来有可能还会支持旧的语法。至少，新的语法更容易理解和更深刻、更一致的实现效果。浏览器不支持Flexbox新的规范，主要是由于他在CR状态，当他成为规范时，会获得浏览器完美支持。

新版本语法支持的浏览器：Chrome21+、Opera（Opera Mobile12.1+和Blackberry10+）。

在IE10中将运行Flexbox的中间版本（2011年版本）：display: flexbox;

DEMO

我最近正帮助别人解决一个建立Fluid-Fixed-Fluid的布局。两个语法均可以轻松的作到这一点。他们都充分的对浏览器作了测试。

旧语法案例 新语法案例

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了我的对技术的理解。若是翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://css-tricks.com/old-flexbox-and-new-flexbox

中文译文：http://www.w3cplus.com/css3/old-flexbox-and-new-flexbox.html