Flexible Box Layout Module

困惑

刚开始使用 Flexbox 布局,或许会有不少困惑。Google 一下,会发现即有 display: box; 也有 display: flex;,属性也是有 box-{*}flex-{*} 两套。

到底是 box 还是 flex 呢?终其原因,Flexbox 还未正式发布,从 2009 年到目前已经经历了多个版本,其中命名发生了较大的变化。

引用 Dive into Flexbox

Flexbox Specification Timeline:

  • July 2009 Working Draft (display: box;)
  • March 2011 Working Draft (display: flexbox;)
  • November 2011 Working Draft (display: flexbox;)
  • March 2012 Working Draft (display: flexbox;)
  • June 2012 Working Draft (display: flex;)
  • September 2012 Candidate Recommendation (display: flex;)

虽然最新一版已经到达 CR 版本,但很多浏览器并不支持,目前支持比较广泛的是 2009 年的版本,具体的兼容情况可参考 caniuse

新老对比

2009年版和2012年版的做个对比:

2009版 2012版 说明
display: box display: flex flexbox 布局
box-lines flex-wrap flex items 是否换行
box-orient flex-direction flex items 的排列方向
box-pack justify-content / align-self 水平方向的剩余空间分配
box-align justify-content / align-self 竖直方向的剩余空间分配
box-direction order flex items 的排列序列
box-flex flex flex item 的大小

说明: box-pack 和 box-align 都对应 justify-content / align-self。因为 justify-content / align-self 和水平、竖直没有直接关系,主要和 main axis 、cross axis 有关,而排列的方向不同,main axis 和 cross axis也会发生变化,可以引用个图说明一下:

css-flexbox_axis

图出自flexbox-basics

个人认为,新 Flexbox 除了命名的变化,在操作单位更加细化,例如:order, align-self, flex-basis, flex-grow, flex-shrink 定义的对象都是 flex item ,这样能产生更多的变化。

Demo

Old Flexbox

New Flexbox (New Flexbox 支持版本有限,该Demo仅支持Chrome,请在Chrome下运行)

PS:Demo 较简略,可自动动手多多尝试。

参考阅读

© 2013 Applezqp. Powered by Jekyll