Yuguo.us

Flexbox的奇怪历史

Introduction

user

余果

全栈工程师,《Web全栈工程师的自我修养》作者。


Featured

front-end

Flexbox的奇怪历史

Posted by 余果 on .

其实现在很多前端同学都知道flexbox这个CSS3布局属性了,它可以方便地让我们做出水平和垂直的布局,而不是依赖于浮动。

我最近在翻译《众妙之门3》的时候,原书关于Flexbox的代码就已经过时了,这里是他们的demo,但在我的Chrome和FF下均无效。但是如果Google一下Flexbox关键词,会发现很多过时的信息。

调研一下就发现这个属性的历史非常奇怪,也不怪Smashing Book的信息过时:

  • 如果你看的博客/书中关于Flexbox的代码是: display:box; 或者属性是 box-{*},那你看的是2009年以前的版本;
  • 如果你看的博客/书中关于Flexbox的代码是: display:flexbox; 或者 flex() 函数,那你看到的是2011年的青涩少年;
  • 如果你看的博客/书中关于Flexbox的代码是: display:flex; 并且属性是 flex-{*} 那你看到的是现在(2012-2013年)的版本。

这些语法的兼容性各不一致,短期来看可能老版本的兼容性还好一点,但长远看来用老式语法是不明智的。至少新语法更简单易懂。还不支持新语法的浏览器以后会逐渐支持。

Example of OLD syntax

Example of NEW syntax

《众妙之门3》中的问题已经反馈给出版社了,看看怎么解决。

参考资料:

“Old” Flexbox and “New” Flexbox

user

余果

https://yuguo.us

全栈工程师,《Web全栈工程师的自我修养》作者。