フレックス、ボックス、またはフレックスボックス: どの CSS 表示プロパティを使用する必要がありますか?

フレキシブル ボックス モデルについて: 表示: flex、box、flexbox

CSS3 の最近の進歩により、フレキシブル ボックス モデルが導入され、レイアウト デザインをより詳細に制御できるようになりました。伝統的な手法。ただし、複数の表示プロパティ値 (flex、box、flexbox) が存在するため、混乱が生じます。

違いと互換性

これら 3 つの値には、ブラウザのサポート レベルが異なります:

• display:box は以前 (Firefox 2.0) で導入されましたが、現在は主にベンダー プレフィックスでサポートされています。 Chrome、Safari、Android などのブラウザでの実装は限られています。
• display: flexbox は、後に (Chrome 17) プレフィックス付きで導入され、その後 IE 10 で導入されました。 Safari/iOS では、引き続きプレフィックスが必要です。
• display: flex が現在の標準であり、プレフィックスなしで最新のブラウザー (Chrome、Firefox、Safari など) でサポートされています。これは最も互換性のあるオプションです。

適切な値の選択

選択はターゲット ブラウザと必要な効果によって異なります。現在のブラウザと古いブラウザの両方との互換性を確保するには、display: flexbox と display: flex を一緒に使用することをお勧めします。特に古いブラウザのサポートが必要な場合は、プレフィックス付きの display: box が必要になる場合があります。

ブラウザ サポートの詳細

以下は、各値のブラウザ サポートをまとめた表です。

Display Value	Chrome	Firefox	Safari/iOS	IE
display: box	4.0 (prefixed)	2.0 (prefixed)	3.1 (prefixed)	10 (prefixed)
display: flexbox	17 (prefixed)	N/A	7 (prefixed)	10 (prefixed)
display: flex	21 (prefixed), 29 (unprefixed)	22 (unprefixed)	N/A	11 (unprefixed)

ブラウザは時間の経過とともに古い値のサポートを終了する可能性があることに注意することが重要です。そのため、将来の互換性のために現在の flex 標準を使用することが推奨されます。

以上がフレックス、ボックス、またはフレックスボックス: どの CSS 表示プロパティを使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。