最終更新:2013-09-10 (火) 18:12:48 (3873d)
Flexbox
Top / Flexbox
CSS Flexible Box Layout Module
http://www.w3.org/TR/css3-flexbox/
バージョン
- IE9以前は非対応。
2009
- Safari 3.1?～Safari 6? -webkit-
- Mobile Safari (iOS 3?～iOS 6) -webkit-
- Firefox 2.0?～ -moz-
- Google Chrome 14?～ -webkit-
2011
最新
http://www.w3.org/TR/css3-flexbox/
- Google Chrome 21?～ -webkit-
- Firefox 20?～ プレフィックスなし
まとめ
- だいたいこんな感じ。
2009 2011 最新 display: box display: flexbox display: flex box-align? flex-align? align-items? - flex-item-align? align-self? - flex-line-pack? align-content? box-orient?: vertical flex-direction?: column flex-direction?: column box-direction?: reverse - flex-flow flex-flow - flex-wrap? flex-wrap? - - flex-grow? - - flex-shrink? - - flex-basis? box-pack?: justify flex-pack? justify-content box-flex?: 1 flex: 1 flex: 1 box-flex-group?: 1 - - box-ordinal-group?: 1 flex-order?: 1 order?: 1 box-lines?: single - -
http://css-tricks.com/using-flexbox/
http://www.zacharybrady.com/flexbox-support-analysis-reference-table/
http://wiki.csswg.org/spec/flexbox-2009-2011-spec-property-mapping
http://momdo.s35.xrea.com/web-html-test/CSS3-memo/memolink.html
http://the-echoplex.net/flexyboxes/
対応
デスクトップ
- 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? - サポートしていません。
