最近看了社区上的一些关于flexbox的很多文章，感觉都没有我这篇文章实在，最重要的兼容性问题好多人都没有提出解决方案。另外本人还废寝忘食的翻译了国外的《CSS3弹性盒模型flexbox完整教程》和《CSS3弹性盒模型flexbox布局实例》，这么好的文章没有人来发现，实在是遗憾。
文章写作背景
查询Can I use上的使用情况，发现最新的浏览器基本支持这个属性，IE10开始支持，需要添加-ms前缀。
至于IE10之前的就不考虑了。弹性布局适合于移动前端开发，在Android和IOS上也完美支持，所以搞移动的朋友非常有必要认识和使用了。这个属性很久就看到了。一直在考虑到兼容性问题，没有认真深入，后来又发现在现在现代浏览器中也会出现一些诡异的bug，所以又放弃了。
如果考虑到只处理移动方面的，那么兼容性就可以忽略了。
w3c上是这样子定义的：box-flex的值为元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。
文章写作目的
Flexbox是一个相当优秀的属性，它可能会成为未来版面布局的一部分。它的语法在过去的几年里发生了很大的变化。但如果我们把旧的，新的和过渡的版本整合在一起，就可以实现更好的支持各种浏览器了。尤其适合简单的，也是最常见使用例子：控制网格。
语法变化的地方
如果你搜索关于Flexbox的相关内容，你会发现许多过时的信息，让我们来看看下面这几种情况：
- 第一种：display:box; 或者是一个属性box-*;那么你看到的是2009年以前的Flexbox。
- 第二种：display:flexbox，或者是一个函数flex()，那么你看到的是2011这个中间版本的Flexbox。
- 第三种：display:flex，或者其他flex-*的属性，那么你看到的是当前的规范（截止本文发表时间）。
过时的例子
- Flexie – a JavaScript polyfill for Flexbox, uses old 2009 syntax.
- This article by Richard 分享在 Smashing Magazine在2011过渡时间，但它更多的关注是2009以前的语法。
- Stephen Hay写了一系列关于Flexbox的文章，这篇文章介绍2009以前的语法，接着是另外一个2011的另外一篇，很不幸，一个月过后语法又更新了。
查看例子
综合案例
最终的排版显示会是下面这样子的。
需要用到的CSS知识，display,box-flex,flex,box-ordinal-group,flex-order,order，这几个都是CSS3的关于弹性盒子的新属性。相关属性将在下一篇文章详细讲解，敬请留意。
html代码：
<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>
CSS代码
.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+ */ } .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+ */ } .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
参考内容
http://css.doyoe.com/
http://css-tricks.com/using-flexbox/
http://www.w3school.com.cn/cssref/pr_box-flex.asp
