27

私たちの多くは、新しいフレキシブル ボックス モデルが CSS3 に導入された後、displayプロパティ likeinlineおよびlike の古い値が時代遅れであることを今日認識しています。blockただし、同じフレキシブル ボックス モデルで Web 上の異なる情報が見つかる場合があります。

displayプロパティの主にflex、 、boxおよびの 3 つの異なる値を見つけることができますflexbox。これら 3 つのフレキシブル ボックス モデルの違いと、使用するモデルの違いは何ですか?

4

2 に答える 2

41

サポートする必要があるブラウザーに必要なものを使用します。

display: box

  • Firefox 2.0? (接頭辞)
  • クローム4.0? (接頭辞)
  • サファリ/iOS 3.1? (接頭辞)
  • Android 2.1 (プレフィックス)

私の知る限り、ラッピング経由box-lines: multipleはどのブラウザーにも実装されていません。

display: flexbox

  • クロム 17-?? (接頭辞)
  • Internet Explorer 10 (プレフィックス)

display: flex - 現在の標準

  • Chrome 21 (プレフィックス付き)、29 (プレフィックスなし)
  • Opera 12.1 (プレフィックスなし)、15 (Webkit プレフィックス)
  • Firefox 22 (プレフィックスなし)
  • Safari/iOS 7 (プレフィックス)
  • ブラックベリー 10 (プレフィックス)
  • Internet Explorer 11 (プレフィックスなし)

http://caniuse.com/#feat=flexbox (IE10 は、ラッピングをサポートする部分的なサポートとしてマークされた唯一のブラウザーであることに注意してください)

との仕様は十分に類似してflexboxおり、特に IE10 では仕様のみがサポートされているため、両方を含めないflex理由はありません。の仕様は大きく異なり、求めている効果によっては含める価値がないかもしれませんが、ほぼすべてのプロパティが/仕様にあるものと類似しています。flexboxboxflexboxflex

複数の仕様をサポートするブラウザーがいくつかあることに気付くかもしれません。古い仕様のサポートが終了する時期が来る可能性が高いため、常にflexプロパティを含めるようにしてください。

于 2013-03-28T00:05:09.573 に答える
14

私の知る限り、フレキシブル ボックス モデルの上記の 3 つの異なるバージョンは、年齢によって分類できます。

  1. display: box- 2009年頃に最新型として採用された最初のフレキシブルボックスモデルです。使用しないでください。

  2. display: flexbox- このフレキシブル ボックス モデルは、まだ開発中であった 2011 年に登場しました。使用しないでください。

  3. display: flex- これは、現在最新のボックス標準としての地位を確立している最新のフレキシブル ボックス モデルです。これはさらに変更される可能性がありますが、他の 2 つの標準よりも優先されます。

于 2013-03-27T15:22:28.050 に答える