跨浏览器的Flexbox

作者：大漠 日期：2013-04-26 点击：3454
Flexbox
CSS3

本文由大漠根据的《Advanced cross-browser flexbox》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/，以及作者相关信息

——作者：

——译者：大漠

简介

CSS Flexible盒模型3又简称为Flexbox。摒弃我们传统上使用的一些hack和组件，Flexbox给网络的发展带来了很多正能量和兴奋济，让我们一起把复杂的网站布局变得简易和快速。早前在Flexbox: fast track to layout nirvana?一文中介绍了Flexbox的一些基础知识。在本文中，我将更进一步，借用Modernizr脚本库使用不同的样式做Flexbox在各浏览器下做一些差异化处理，为Flexbox在各浏览器下提供最佳展示水平。

如果你阅读《Flexbox: fast track to layout nirvana?》一文，对英文感觉吃力的话，你可以移动阅读翻译的中文版本《Flexbox——快速布局神器》。

——大漠

推出案例

在这篇文章中创建的例子，看起来如下图所示：

跨浏览器的Flexbox

图片最终布局示例。

这个示例包含了多个伸缩容器（flexbox container）。如果你愿意，可以点击示例查看，阅读或探索更详细的代码。

整体布局

示例网站的基本布局是这样的：

<section>
  <nav></nav>
  <article></article>
  <article></article>
</section>

<section>设置为一个伸缩容器，代码如下所示：

section {
  display: -ms-flexbox;
  -ms-box-orient: horizontal;/*IE10中显不一行，类似于flex-direction:row功能*/

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

注：从2011年到Opera和Chrome提供的最新规范，由于IE10目前支持不同的flexbox语法，在IE10中设置特定的属性。Firefox和其他的webkit内核浏览器（如Safari）支持一个更旧版本的flexbox语法（2009）,这使用flexbox更糟糕。除此之外，Modernizr报告IE10支持现代flexbox的语法，尽管它他还没有用，因此我们需要使用老的语法来处理IE10下的flexbox效果，而不是使用Modernizr规则来做IE10的兼容。详细的可以看下文，你可以获取更多的细节介绍。

让他们都在同一水平流上，但<nav>使用下面的规则，迫使其在单独的一行中显示：

nav {
  padding: 1rem;
   -webkit-flex: 1 100%;
  -moz-flex: 1 100%;
  -ms-flex: 1 100%;
  flex: 1 100%;
}

设置“flex-basis”为100%，使用其宽度和父容器的宽度一样，同时迫使其他伸缩项目到新的一行。<article>的“flex-grow”的值设置如下：

article:nth-of-type(1) {
  -webkit-flex: 2;
  -moz-flex: 2;
  -ms-flex: 2;
  flex: 2;
}

article:nth-of-type(2) {
  -webkit-flex: 3;
  -moz-flex: 3;
  -ms-flex: 3;
  flex: 3;
}

使他们在主轴点有一定比例的空间——第一个<article>占40%,也就是宽度的五分之二；第二个<article>（也就是图片容器）占60%，也就是宽度的五分之三。这是值得记住——这个比例是只有在同一线上的伸缩项目具有，并非所有伸缩项目都具有的比例。

注：“flex-basis”是一个收缩基准值，首先用在伸缩项目上，在那之后主轴剩余的空间会根据每个伸缩项目的“flex-grow”伸缩比率来划分给每个伸缩项目，分配主轴的剩余空间。当“flex-grow”没有显式的设置值时，它的默认值为“1”。为了更好的了解他是如何工作的原理，你可以阅读flexbox模块中的flex部分，或者阅读《Flexbox——快速布局神器》这篇文章里面有关于flex的内容介绍。

伸缩项目

当你设置了一个元素为伸缩容器的时候，它只会影响他的子元素，而不会进一步的影响他的后代元素。但是没有什么可以阻止你为他们的后代设置为伸缩项目，使用一些布局变得复杂化。很简单，在这里，我把<nav>设置为伸缩容器，我可以让他居中对齐，而且不必担心容器的宽度或视窗的宽度大小。

nav {
    display: -ms-flexbox;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;/*ie10水平居中*/

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  
  /*水平居中*/
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center; 
}

接着再把<ul>设置为伸缩容器，保证他的子元素li能居中，代码如下所示：

nav ul {
  text-align: center;

  display: -ms-flexbox;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center; 
  width: 80%;
}

nav a {
  width: 100%;
}

我还添加了一些属性来解决导航菜单项的外观。我希望<ul>不完全拉伸穿过屏幕，并且让所有文本居中显示，所以我设置了一个"width:80%"和"text-align:center"。同时给链接设置了宽度为100%，用来确保链接跨整个列表项宽度。

接下来是神奇的时刻。在这一点上，列表项看起来有眯重叠和奇怪，而用当他们开始包装时看起来有点笨。没有使用媒体查询实现一个响应式的菜单，看上去很酷，那么我们需要下面的代码来实现：

nav ul li {
  margin: 0 1.5rem;
  
  -webkit-flex: auto;
  -moz-flex: auto;
  -ms-flex: auto;
  flex: auto;
  
  min-width: 5rem;
}

在这里，我给列表项目设置了一个margin，让他们有一定的空间，给他们设置了一个min-width，并且将"flex"设置为“auto”。这是flex的一个特殊的值，可以让伸缩项目具有一个min-width的值，当没有多余的空间的时候，让伸缩项目保持一个常数大小（min-width），但有多余的空间时，伸缩项目能扩大填补。当你扩展和收缩页面的时候看看会发生什么？

跨浏览器的Flexbox

接下来设置第二个<article>,并设置里面每个段落（包括段落里的img）：

article:nth-of-type(2) {
  display: -ms-flexbox;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: inline-flex;
  
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  
  -webkit-align-content: flex-start;
  -moz-align-content: flex-start;
  -ms-align-content: flex-start;
  align-content: flex-start;
}

article p {
  margin: 0.5rem;
  
  -webkit-flex: 1 20rem;
  -moz-flex: 1 20rem;
  -ms-flex: 1 20rem;
  flex: 1 20rem;
}


article p img {
  display: block;
  width: 100%;
  border: 1px solid black;
}

在这里给他们设置了个固定的flex-basis值，所以他们会根据每行的数量增加和减少自己的宽度（如下图所示，没有使用媒体查询），并且会使用每一项，和每一项里面的内容水平垂直居中显示。

跨浏览器的Flexbox

跨浏览器的Flexbox

跨浏览器的Flexbox

一个没有媒体查询的响应式图像框。

Flexbox反馈

支持Flexbox的浏览器有Webkite内核浏览器、Presto-based Opera、Firefox(即将),要真正支持主流浏览器将还需要一段时间。这意味着，如果我们想使用flxbox还需要选择一些备案方法。2009年开始一些浏览器（老的webkit、firefox）支持老版的Flexbox语法。奇怪的是IE10从2011后既支持老的语法又支持新的语法。值得庆幸的是Modernizr脚本库使用“flexbox”和“flexbox-legacy”标记能检测出Flexbox的现代语法和Flexbox旧的语法。实际上它并不支持这两种——它支持一个介于这两者之间的一种语法。这就是为什么我们一直在IE10中把代码写在CSS中，而不是使用Modernizr代码块，你将在后面的文章介绍中可以看到。

注：截至2013年04月会，已经有讨论如何处理Modernizr中Flexbox在IE10中检测问题。

下面的表总结了Flexbox最新语法和2009年、2011年等效的混合语法：

跨浏览器的Flexbox

上表显示了不同的flexbox语法支持跨不同的浏览器,对不同属性的等价物。

注：从2009年的规范"box-lines"属性看上去等同于“flex-wrap”，但不幸的是，这个并不支持混合语法的浏览器。

所以，我在示例中添加了以下代码，用来实现支持flexbox混合写法，但不支持flexbox的浏览器的flebox效果：

.no-flexbox section {
  display: -webkit-box;
  display: -moz-box;
  
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
}

.no-flexbox nav {
  padding: 1rem;
  width: 20%;
}

.no-flexbox article {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
}

.no-flexbox article p {
  float: left;
}

.no-flexbox article img {
  display: block;
  width: 200px;
}

然后在样式中加入不支持flexbox，甚至不支持混合flexbox语法浏览器的兼容样式代码：

.no-flexbox-legacy nav, .no-flexbox-legacy article {
  float: left;
}

.no-flexbox-legacy nav {
  width: 20%;
}

.no-flexbox-legacy article {
  width: 36%;
}

.no-flexbox article img {
  float: left;
}

注：一个用来生成跨浏览器的flexbox代码，并且可以帮你了解不同浏览器使用语法的在线工具Flexy Boxes。

Flexbox在线生成工具

在70+ 优秀的前端工具中收录了类似于Flexy Boxes在线生成Flexbox的其他工具：

  1. Flexplorer
  2. CSS Flexbox Please!
  3. Flexiejs

——大漠

添加简单的媒体查询实现宽屏和窄屏的布局

最后，为了解决宽屏和窄屏下的布局，我决定添加几个媒体查询。但注意怎么在媒体查询中添加这些代码，因为Flexbox天生就是创建响应式布局的神器。

首先在支持混合语法上写一些代码来解决响应式效果：

@media all and (max-width: 600px) {
  h1 {
    font-size: 5rem;
  }
  
  .no-flexbox section { 
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
  }
  
  .no-flexbox nav {
    width: 100%;
    margin-left: -3rem;
  }
  
  .no-flexbox nav a, .no-flexbox nav ul, .no-flexbox nav li {
    width: 100%;
  }

}

接下来,一个现代flexbox修复,没有在所有的浏览器,在小屏幕宽度。

@media all and (max-width: 480px) {
  article:nth-of-type(1) {
    -webkit-flex: 1 100%;
    -moz-flex: 1 100%;
    -ms-flex: 1 100%;
    flex: 1 100%;
  }
  
  body {
    min-width: 320px;
  }
  
  nav ul {
    width: 100%;
  }
    
  .no-flexbox-legacy nav, .no-flexbox-legacy article {
    float: none;
  }

  .no-flexbox-legacy nav, .no-flexbox-legacy article {
    width: 100%;
  }
}

最后用媒体查询给大多少屏幕情况下设置一个居中效果：

@media all and (min-width: 1100px) {
  section {
    width: 1100px;
    margin: 0 auto;
  }
}

总结

此时是有限度的使用Flexbox，当都使用同一种方式支持现代浏览器的时候，Flexbox才会变得更加简易。到现在为止，更有效果的支持，只是一些简单的效果，单行的可以用flexbox，对于多行的在混合语法中就无法得到浏览器的支持。因为它的标准，我的示例运行的很正常，尽管混合语法的flexbox不如现代flexbox布局。另一个有趣的问题是，Firefox好像不支持居中，后来只好使用"margin: 0 auto"来实现(safari下支持居中)。

对于flexbox的一些简单的使用，在现代浏览器（Chrome、Firefox、Safari、Opera Presto 12.1+，IE10+，IOS和Android）可以得到很好的支持。

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

如需转载烦请注明出处：

英文原文：http://dev.opera.com/articles/view/advanced-cross-browser-flexbox

中文译文：http://www.w3cplus.com/css3/advanced-cross-browser-flexbox.html

返回顶部