使用Flexbox：新旧语法混用实现最佳浏览器兼容

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

——做者：Chris Coyier

——译者：大漠

Flexbox很是的棒，确定是将来布局的一种主流。在过去的几年这之中，语法改变了很多，这里有一篇“旧”和“新”新的语法区别教程（若是你对英文不太感兴趣，能够移步阅读中文版本）。可是，若是咱们把Flexbox新语法、旧语法和中间过渡语法混合在一块儿使用，咱们就可让浏览器获得完美的展现。尤为是对一个简单的和最可能常见的实例：控制网格顺序。

HTML结构

一个具备语义化的容器“page-wrap”，包裹了三个主要区域，并将容器设置为伸缩容器，此时容器中的每外区域自动变成了伸缩项目。

<div class="page-wrap">
  <section class="main-content" role="main">
    Main content: first in source order
  </section>
  <nav class="main-nav" role="navigation">
    Links
  </nav>
  <aside class="main-sidebar" role="complementary">
    Sidebar
  </aside>
</div>    

咱们最终要实现的效果以下：

 

伸缩容器

咱们须要使用咱们的列在一个伸缩容器中显示上下文。只有这样，这些元素才能直接成为伸缩项目。他们以前是什么没有关系，只要如今他们是伸缩项目。

咱们须要把Flexbox旧的语法、中间过渡语法和最新的语法混在一块儿使用，在这里他们的顺序显得很是重要。“display”属性自己并不添加任何浏览器前缀，咱们须要确保咱们老语法不要覆盖新语法让浏览器（可能老是会）同时支持。

.page-wrap {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }    

控制列宽

咱们目标是制做一个20%、60%、20%网格布局。

第一步设置咱们主内容区域宽度为60%。

第二步设置侧边栏来填补剩余的空间。

一样把新旧语法混在一块儿使用：

.main-content {
  width: 60%;
}
.main-nav,
.main-sidebar {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}    

在新的语法中，没有必要给边栏设置宽度，由于他们一样会使用20%比例填充剩余的40%空间。可是我发现，若是不给他们显式的设置宽度，在老的语法下会直接崩溃。

重排列的顺序

我但愿主内容排列在中间，但在源码之中他是排列在第一的位置。使用Flexbox能够很是容易实现，可是咱们须要把Flexbox几中不一样的语法混在一块儿使用：

.main-content {
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.main-nav {
  -webkit-box-ordinal-group: 1;  
  -moz-box-ordinal-group: 1;     
  -ms-flex-order: 1;     
  -webkit-order: 1;  
  order: 1;
}
.main-sidebar {
  -webkit-box-ordinal-group: 3;  
  -moz-box-ordinal-group: 3;     
  -ms-flex-order: 3;     
  -webkit-order: 3;  
  order: 3;
}

支持的浏览器

若是你将Flexbox多版本混合在一块儿使用，能够获得如下浏览器的支持：

•  Chrome any
•  Firefox any
•  Safari any
•  Opera 12.1+
•  IE 10+
•  iOS any
•  Android any

最在的限制固然是IE浏览器了，但在其余方面很好。若是你正在作一个特定的移动版本网站，你也会获得更好的支持。若是有谁在window版本手机上测试，麻烦告诉我一下测试结果。

Firefox19有点问题，你须要在观察一下它。例如，在这个案例中，我没法近死侧边栏为20%。这个只是折叠到内容的宽度里，这样说或许有点武断。我须要设置“-moz-box-flex:1”，不然主内容（60%）会伸展到和最宽的段落，就像是段落设置了“white-space:nowrap”，这一点简直是莫名其妙。

DEMO

CodePen的案例

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

如需转载烦请注明出处：

英文原文：http://css-tricks.com/using-flexbox

中文译文：http://www.w3cplus.com/css3/using-flexbox.html