Flexbox版本
flexbox從第一次出現至今總共有三個語法版本，他們分別是：
- "display:box;" — 2009年的老版本
- "display:flexbox;" — 2011年過渡版本/混合版本
- "display:flex;" — 標準版本
| 規範版本 | IE | Opera | Firefox | Chrome | Safari |
| 標準版本 | IE 11 + | 12.10+ * | 20+ | 21+ ( -webkit- ) |
7.0(-webkit-) |
| 過渡版本 | 10 ( -ms- ) |
||||
| 老版本 | 3+ ( -moz- ) |
<21 ( -webkit- ) |
3+ ( -webkit- ) |
開啟flexbox：讓一個元素變成伸縮容器
| 規範版本 | 屬性名稱 | 塊級伸縮容器 | 內聯伸縮容器 |
|---|---|---|---|
| 標準版本 | display |
flex |
inline-flex |
| 混合版本 | display |
flexbox |
inline-flexbox |
| 老版本 | display |
box |
inline-box |
主軸對齊方式：指定伸縮專案沿主軸對齊方式
| 規範版本 | 屬性名稱 | start | center | end | justify | distribute |
|---|---|---|---|---|---|---|
| 標準版本 | justify-content |
flex-start |
center |
flex-end |
space-between |
space-around |
| 混合版本 | flex-pack |
start |
center |
end |
justify |
distribute |
| 老版本 | box-pack |
start |
center |
end |
justify |
N/A |
側軸對齊方式：指定伸縮專案沿側軸對齊方式
| 規範版本 | 屬性名稱 | start | center | end | baseline | stretch |
|---|---|---|---|---|---|---|
| 標準版本 | align-items |
flex-start |
center |
flex-end |
baseline |
stretch |
| 混合版本 | flex-align |
start |
center |
end |
baseline |
stretch |
| 老版本 | box-align |
start |
center |
end |
baseline |
stretch |
單個伸縮專案側軸對齊方式
| 規範版本 | 屬性名稱 | auto | start | center | end | baseline | stretch |
|---|---|---|---|---|---|---|---|
| 標準版本 | align-self |
auto |
flex-start |
center |
flex-end |
baseline |
stretch |
| 混合版本 | flex-item-align |
auto |
start |
center |
end |
baseline |
stretch |
| 老版本 | N/A | ||||||
伸縮專案行對齊方式：指定伸縮專案行在側軸的對齊方式
| 規範版本 | 屬性名稱 | start | center | end | justify | distribute | stretch |
|---|---|---|---|---|---|---|---|
| 標準版本 | align-content |
flex-start |
center |
flex-end |
space-between |
space-around |
stretch |
| 混合版本 | flex-line-pack |
start |
center |
end |
justify |
distribute |
stretch |
| 老版本 | N/A | ||||||
PS:這個只有伸縮專案有多行時才生效，這種情況只有伸縮容器設定了flex-wrap為wrap時，並且沒有足夠的空間把伸縮專案放在同一行中。這個將對每一行起作用而不是每一個伸縮專案。
顯示順序：指定伸縮專案的順序
| 規範版本 | 屬性名稱 | 屬性值 |
|---|---|---|
| 標準版本 | order |
|
| 混合版本 | flex-order |
<number> |
| 老版本 | box-ordinal-group |
<integer> |
伸縮性：指定伸縮專案如何伸縮尺寸
| 規範版本 | 屬性名稱 | 屬性值 |
|---|---|---|
| 標準版本 | flex |
none | [ <flex-grow> <flex-shrink> ? || <flex-basis> ] |
| 混合版本 | flex |
none | [ [ <pos-flex> <neg-flex> ? ] || <preferred-size> ] |
| 老版本 | box-flex |
<number> |
伸縮流：指定伸縮容器主軸的伸縮流方向
| 規範版本 | 屬性名稱 | Horizontal | Reversed horizontal | Vertical | Reversed vertical |
|---|---|---|---|---|---|
| 標準版本 | flex-direction |
row |
row-reverse |
column |
column-reverse |
| 混合版本 | flex-direction |
row |
row-reverse |
column |
column-reverse |
| 老版本 | box-orient box-direction |
horizontal normal |
horizontalreverse |
verticalnormal |
verticalreverse |
換行：指定伸縮專案是否沿著側軸排列
| 規範版本 | 屬性名稱 | No wrapping | Wrapping | Reversed wrap |
|---|---|---|---|---|
| 標準版本 | flex-wrap |
nowrap |
wrap |
wrap-reverse |
| 混合版本 | flex-wrap |
nowrap |
wrap |
wrap-reverse |
| 老版本 | box-lines |
single |
multiple |
N/A |
wrap-reverse讓伸縮專案在側軸上進行start和end翻轉，所以，如果伸縮專案在水平排列，伸縮專案翻轉不會到一個新的線下面，他會翻轉到一個新的線上面。（簡單理解就是伸縮專案只是上下或前後翻轉順序）。
在寫本文的時候，在Firefox中並不支援flex-wrap或者box-lines屬笥。他不支援速記。
當前規範flex-flow是一個速記版本，他包括了換行flex-wrap和伸縮流flex-direction。在IE10中也支援這個版本規範。它目前還不支援Firefox瀏覽器，所以我建議避免使用它，僅使用flex-direction來指定伸縮流方向。
轉載於 http://www.tuicool.com/articles/quQVv2