最終更新:2013-09-10 (火) 18:12:48 (1535d)  

Flexbox はてなブックマークを見る
Top / Flexbox

CSS Flexible Box Layout Module

http://www.w3.org/TR/css3-flexbox/

バージョン

  • IE9以前は非対応。

2009

  • Safari 3.1?Safari 6? -webkit-
  • Firefox 2.0?~ -moz-
  • Google Chrome 14?~ -webkit-

2011

  • IE10 -ms-
  • Google Chrome 17?Google Chrome 20? -webkit-

最新

まとめ

  • だいたいこんな感じ。
    20092011最新
    display: boxdisplay: flexboxdisplay: flex
    box-align?flex-align?align-items?
    -flex-item-align?align-self?
    -flex-line-pack?align-content?
    box-orient?: verticalflex-direction?: columnflex-direction?: column
    box-direction?: reverse
    -flex-flowflex-flow
    -flex-wrap?flex-wrap?
    --flex-grow?
    --flex-shrink?
    --flex-basis?
    box-pack?: justifyflex-pack?justify-content
    box-flex?: 1flex?: 1flex?: 1
    box-flex-group?: 1--
    box-ordinal-group?: 1flex-order?: 1order?: 1
    box-lines?: single--

対応

デスクトップ

  • Opera(12.1)- 最新のflexbox仕様をサポートしています。ベンダープレフィックスは不要です。
  • Google Chrome(23.0)- 最新のflexbox仕様をサポートしています。ただし、-webkitベンダープレフィックスが必要です。
  • Safari(5.1)- 以前のバージョンのflexbox仕様(2009)をサポートしています。-webkitベンダープレフィックスが必要です。
  • Internet Explorer(10)- 以前のバージョン(2011)のflexbox仕様をサポートしています。-msベンダープレフィックスが必要です。Internet Explorer 9およびこれより前のInternet Explorerはflexbox仕様をサポートしていません。
  • Firefox(16.0)- 以前のバージョン(2009)のflexbox仕様をサポートしています。-mozベンダープレフィックスが必要です。ただし、バージョン20.0からはベンダープレフィックスなしで最新のflexbox仕様をサポートしています。

モバイル

  • iOSおよびAndroid - 以前のバージョン(2009)のflexbox仕様をサポートしています。ただし、-webkitプレフィックスが必要です。
  • Blackberry?(バージョン10)- 最新のflexbox仕様をサポートしています。ただし、–webkitプレフィックスが必要です。
  • Opera mini? - サポートしていません。

関連

参考