web-dev-qa-db-ja.com

W3C CR（ディスプレイ：フレックスなど）に従って、現在のCSSフレキシブルボックスレイアウトモジュールのポリフィルはありますか？

Flexiejs.com CSSフレックスボックス用のブラウザポリフィルがありますが、それはトピックに関する以前のドラフトに基づいており、現在のW3C候補の推奨事項と互換性がありません CSSフレキシブルボックスレイアウトモジュール =。 CRで定義されているフレックスボックスの少なくとも部分的なポリフィルはありますか？

javascriptcssflexbox
24
Jukka K. Korpela

現在、W3C Candidate Recommendationを実装するポリフィルはありません。

Flexie.jsの作者は、彼がflexie.jsの更新に取り組んでいると以前に述べましたが、それ以降何も公開されていません。そのため、実際に実現するかどうか、またはいつ実現するかを判断するのは困難です。

9
snjesko

2014更新された回答

要約すると、作成時（2014年10月）には、W3C候補の推奨を実装するJavaScriptポリフィルはありません。

2つのjavascript polyfill実装があります。

  1. Flexie.js 2012年半ば以降、更新はほとんどありません- 貢献度グラフを参照 -およびのみがをサポート2009 Flexbox model、これはプロパティの制限されたセットを意味します。

  2. Reflexie.jsは執筆時点（2014年10月）でもまだ変更されておらず、別の回答のコメントでIlya Streltsynが指摘しているように、 "それでもまだ 'Soooooは準備ができていません'"著者がプロジェクトのメインページで述べたように 。最新のコミットは2012年11月1日に行われました...

リソース

14
Adrien Be

Chris Coyierによる素晴らしいリソースがあります。

http://css-tricks.com/using-flexbox/

問題は、フレックスボックスで使用されている3つのドラフトがあることです。 Chris Coyierの記事では、3つすべてのバージョンと、ブラウザー間サポートのためにそれらをインターリーブする方法について説明しています。以下の関連ビットを抜粋しました。

ために display:flex：

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;

ために flex:1：

-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1;         /* OLD - Firefox 19- */
width: 20%;               /* For old syntax, otherwise collapses. */
-webkit-flex: 1;          /* Chrome */
-ms-flex: 1;              /* IE 10 */
flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

ために order:1：

-webkit-box-ordinal-group: 1;  
-moz-box-ordinal-group: 1;     
-ms-flex-order: 1;     
-webkit-order: 1;  
order: 1;

彼は次の支持を主張している：

  • クローム
  • Firefox任意
  • サファリ
  • Opera 12.1以降
  • IE 10以降
  • iOSのいずれか
  • アンドロイド

残りのflexboxプロパティは変更されていないので、「標準」のプレフィックスセット（-ms、-moz、-webkit、接頭辞なし）。

7
chowey