web-dev-qa-db-ja.com

フレキシブルボックスモデル-ディスプレイ：フレックス、ボックス、フレックスボックス？

CSS3で新しいフレキシブルボックスモデルが導入された後、displayやinlineのようなblockプロパティの古い値が古くなっていることを私たちは今日知っています。ただし、同じフレキシブルボックスモデルでWeb上の異なる情報を見つける場合があります。

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

cssflexbox
25
Kevin

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

display: box

  • Firefox 2.0？ （接頭辞付き）
  • Chrome 4.0？ （接頭辞付き）
  • Safari/iOS 3.1？ （接頭辞付き）
  • Android 2.1（プレフィックス）

私の知る限り、box-lines: multipleによるラップはどのブラウザにも実装されていません。

display: flexbox

  • Chrome 17- ?? （接頭辞付き）
  • Internet Explorer 10（プレフィックス）

display：flex -現在の標準

  • Chrome 21（接頭辞付き）、29（接頭辞なし）
  • Opera 12.1（プレフィックスなし）、15（webkitプレフィックス）
  • Firefox 22（プレフィックスなし）
  • Safari/iOS 7（プレフィックス）
  • Blackberry 10（プレフィックス）
  • Internet Explorer 11（プレフィックスなし）

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

flexboxとflexの仕様はよく似ており、特にIE10がflexbox仕様しかサポートしていないため、両方を含める理由notはありません。 box/flexbox仕様にあるものに類似しているプロパティはほとんどすべてありますが、flexの仕様は非常に異なり、後の効果によっては含めても価値がない場合があります。

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

40
cimmanon

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

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

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

  3. display: flex-これは、最新のボックス標準として現在その場所を見つけた最新のフレキシブルボックスモデルです。これはさらにいくつかの変更を受ける可能性がありますが、これは他の2つの標準よりも推奨されます。

14
Kevin