HTML5和CSS3：游戏的变革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上向前发展雅思改分