| 文章简介：CSS Flexible盒模型3又简称为Flexbox。摒弃我们传统上使用的一些hack和组件，Flexbox给网络的发展带来了很多正能量和兴奋济，让我们一起把复杂的网站布局变得简易和快速。 |
简介
CSS Flexible盒模型3又简称为Flexbox。摒弃我们传统上使用的一些hack和组件，Flexbox给网络的发展带来了很多正能量和兴奋济，让我们一起把复杂的网站布局变得简易和快速。早前在Flexbox: fast track to layout nirvana?一文中介绍了Flexbox的一些基础知识。在本文中，我将更进一步，借用Modernizr脚本库使用不同的样式做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），但有多余的空间时，伸缩项目能扩大填补。当你扩展和收缩页面的时候看看会发生什么？
接下来设置第二个<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的浏览器有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语法支持跨不同的浏览器,对不同属性的等价物。
注：从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的其他工具：
- Flexplorer
- CSS Flexbox Please!
- 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
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索display
， flex
， flex 超链接
， flex4.0
， 语法
， center
， 支持
， ios 列表 伸缩
， Native之FlexBox
， FlexBox详解
， FlexBox实例
， 伸缩图片
， rem布局
Flexbox
css3盒子模型、css3弹性盒模型、css3盒模型、css3弹性盒子模型、css3弹性盒模型兼容性，以便于您获取更多的相关知识。