cherryvenus

Flexbox的正确使用方法:混合新老语法,以获得浏览器最佳的支持 | CSS-Tricks

cherryvenus · 2017-03-30翻译 · 763阅读 原文链接

Flexbox十分赞,并且毫无疑问是未来布局的一部分。这语法在过去几年已经改变了很多,因此存在“旧”和“新”的语法。但是如果我们将新,老,以及介于两者之间的语法,交织在一起,我们就能够获得优雅的浏览器支持。特别是对于一个简单而且通用的使用案例:顺序控制网格。

HTML

一个无意义的语义wrapper围绕三个主要的区域,然后设置flexbox上下文。每一块语义化的标记区域都会变成纵列。

<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语境

我们需要为纵列的容器设置一个flexbox显示的语境。通过这么做,这个元素所有的直接子元素都变成了flex项目。不要在意它们之前是什么样子的,它们现在都是flex项目了。

现在我们就需要将旧的,新的,和两者之间的语法交织在一起了。顺序在这里十分重要。 因为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+ */
}

在新的语法中,给侧边栏设置宽度并不是必要的,因为他自己会填满剩下的40%空间并且平分每个20%。但是我发现如果不设置宽度会导致一些旧语法崩坏。

纵列重新排序

我们希望剩下的内容视觉上出现在中间,但是在源码中第一个出现。在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;
}

浏览器支持

如果我们做了这些融合,你可以获得

  • 所有Chrome
  • 所有Firefox
  • 所有Safari
  • Opear 12.1+
  • IE10+
  • 所有IOS
  • 所有Android

最大的限制因素就是IE,但是除此之外都很好。如果你在做一个手机的特定版本,那么你就在一个很好的模型之中。如果有人能够在Windows手机上测试,请让我知道。

你需要注意Firefox 19以下版本有一些bug。比如,在这个例子中,我没能够想出一个办法让侧边栏真的是20%。内部宽度的破坏,就和内部的文字一样任意。我同样需要-moz-box-flex: 1;放在主要的内容(60%),不然这就会拉升地非常宽,如果他有white-space:nowrap这个属性,也就是我无法理解事情。

Demo

CodePen:

[在Pen上查看!](http://codepen.io/chriscoyier/pen/zlntC)

如果需要更多的Flexbox知识

点击获得flexbox完全教程

相关文章