• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

旧CSS Flexbox语法案例和新CSS Flexbox_css

css 搞代码 7年前 (2018-06-11) 155次浏览 已收录 0个评论
文章目录[隐藏]

文章简介:2011年Richard Shepherd在Smashingmagazine.com写了篇文章。文章附带的提到了2011年版本的语法,但更侧重于2009年旧版本的语法。

大家都清楚的知道:“Flexbox”(全称:css Flexible Box Layout Module)在过去的三年中经历了许多变化。变化都达到了规范以及什么样的浏览器支持Flexbox

如何辨别

如果你使用google搜索Flexbox,你会发现很多过时的信息。这里将告诉你如何迅速的辨别你需要的信息。

如果你正在查找有关于Flexbox的博客资料,你看到了“display:box;”或者“box-{*}”属性,那么你看的正是2009年版本的Flexbox。

如果你正在查找有关于Flexbox的博客资料,你看到了“display:flexbox;”或者“flex()”函数,那么你看的正是2011年版本的Flexbox。

如果你正在查找有关于Flexbox的博客资料,你看到了“display:flex;”和“flex-{*}”属性,那么你查看的是当前(在写此文时)的规范。

过时的教程与例子

这些东西在创建的时候都非常的棒,但对于现在而言有些过时。

Flexie——一个JavaScript脚本,使用的是2009年的旧版本语法。

2011年Richard ShepherdSmashingmagazine.com写了篇文章。文章附带的提到了2011年版本的语法,但更侧重于2009年旧版本的语法。

Stephen Hay早前就写了一篇有关于Flexbox的教程,他的这篇教程介绍的也是2009年老版本语法,随后他对2011版本Flexbox也做了一个跟踪,并且分享了出来。

我第一次接触Flexbox是来自于Paul Irish分享的教程,他使用的是2009年语法版本。顶部介绍了Flexbox的特性,并且链接到Stephen Hay介绍2011年语法版本的文章中。

支持

浏览器支持条款变得有点复杂。

2009年旧版本语法得到浏览器较好的支持:Chrome、Firefox2+、Safari3.1+ …除IE9和Opera几乎所有浏览器都支持。我所说的“支持”,实际的实现与支持会有点不同(因此,有些需要重写)。

尽管旧的语法得到很好的支持,但使用旧的语法并不是一个聪明的做法。旧的规范始终要淘汰。浏览器在未来有可能还会支持旧的语法。至少,新的语法更容易理解和更深入、更一致的实现效果。浏览器不支持Flexbox新的规范,主要是因为他在CR状态,当他成为规范时,会得到浏览器完美支持。

新版本语法支持的浏览器:Chrome21+、Opera(Opera Mobile12.1+和Blackberry10+)。

在IE10中将运行Flexbox的中间版本(2011年版本):display: flexbox;

DEMO

我最近正帮助别人解决一个创建Fluid-Fixed-Fluid的布局。两个语法都可以轻松的做到这一点。他们都充分的对浏览器做了测试。

旧语法案例 新语法案例

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

如需转载烦请注明出处:

英文原文:http://css-tricks.com/old-flexbox-and-new-flexbox

欢迎大家阅读《旧CSS Flexbox语法案例和新CSS Flexbox…_css》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:旧CSS Flexbox语法案例和新CSS Flexbox_css

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址