CSS的未来：游戏的变革Flexbox

日期：2013-4-26  来源：GBin1.com

相关阅读：

使用Flexbox布局方式的简单演示

HTML5和CSS3给网络开发者提供了新的语法标签，本地动画工具，服务器端字体等等新增功能，这些并不是结束。开发者正苦于为网页设计挖出一条战壕 - 真正的页面排版工具，事实上，即便是最有前途的CSS3现在也仍旧是在地平线上。

虽然它可以创造出令人惊讶的复杂布局，例如CSS悬浮，定位规则，以及有些怪异的JavaScript，但是这些工具中，没有一个是用于明确布局内容的，这就是为什么你想要在浏览器用这些工具实现你想要的布局是如此令人惊讶的复杂。很快的，你就可以嵌入抛出你的悬浮效果用一种更好的方式 - CSS Flexible Box Model，可以简单称为Flexbox。Flexbox可以让你用几行非常简单的代码创建一个复杂的布局 - 不再需要悬浮和“清除悬浮”。

也许它更加强大的一点 - 特别是建设响应网站 - Flexbox的order属性允许你在HTML源顺序中创建一个完全独立的布局。基于一些理由，你想要自己的页脚出现在页面上方？没问题，只要将你的页脚CSS设置为顺序1，Flexbox也可以使它垂直居中。

Flexbox早就存在，但是它的规范被重写了，旧的代码就已经过时了。如果你想学习新的语法， 这里将提供一个简单的demo。

我 们将带你在移动设备和桌面应用上使用Flexbox进行布局设计，使用一小部分代码实现重新安排源顺序和元素的布局代码，取代以往使用悬浮或者其他老式布 局工具所作的工作。让你的头脑充斥Flexbox最好的方法是看看它是如何动作的，所以一定要在Chrome，Opera或者Firefox 20+等浏览器上进行演示。

对于有些浏览器，使用Flexbox仍然有些太早。浏览器支持仍 在继续改进，但是显然地，旧的浏览器不会支持Flexbox，所以记住这一点。Opera 12支持新的语法，不需要前缀。Chrome支持新的语法，但是需要加上 -webkit前缀。如Opera一样，Firefox 22支持不需要加前缀的Flexbox。V22（现在是beta版）Firefox支持旧的语法。IE 10支持旧的语法。大部分移动设备浏览器支持旧的语法，尽管他们开始改变。（Firefox对Flexbox的支持推迟到了V22。事实上从V20，他就 开始支持Flexbox的新语法，但是在V22版本前，此支持是默认被设置为无效的。如果你想激活它，需要再about:config中搜索 layout.css.flexbox.enabled选项，将它设置为可用，然后新的语法就可以在你的浏览器中使用了。）

所以，如上所述，只有两款浏览器完全支持新的Flexbox语法，当然Firefox会在下个月加入，使支持新语法的浏览器变成三款。

但是仍有方法绕过一些问题。首先，请阅读Chris Coyier写的关于混合新旧语法来获得尽可能多的浏览器的支持。Coyier的方法使你的Flexbox布局可以在IE9以上的版本上应用的非常漂亮。

如 果只是你自己的个人站点可以使用IE9，因为你也许只需要简单的线性的布局。或者你可以为低版本IE提供一个额外的包含了一些悬浮或者花车的样式单（或者 使用CSS类，如果你愿意的话）。这会使Flexbox的优点不能得以施展，因为你需要写代码来实现悬浮，但是当使用减少，你可以转储你的代码，移植你的 网站，在web上向前发展。

via 极客标签

来源：CSS的未来：游戏的变革Flexbox