フレックスボックスの混乱: 「display: flex」、「display: box」、「display: flexbox」の違いは何ですか?

フレキシブル ボックス モデル: 表示: フレックス、ボックス、フレックスボックス

CSS3 でのフレキシブル ボックス モデルの導入は、設計方法に革命をもたらしました。レイアウト。ただし、表示プロパティ (flex、box、flexbox) に複数の値が存在すると、混乱が生じる可能性があります。

違いを理解する

3 つの値は本質的に異なります。同じモデルの構文。これらはすべて、要素のレイアウトと位置の制御を強化する柔軟なボックス レイアウト仕様を実装しています。ただし、ブラウザのサポートには微妙な違いがいくつかあります。

• display: box: Firefox 2.0 および Chrome 4.0 で導入されたもので、サポートは限定的であり、ラッピングは完全には実装されていません。
• display: flexbox: Chrome 17 および Internet Explorer 10 (プレフィックス付き) で利用可能ですが、flex を優先して段階的に廃止されました。
• display: flex: Chrome、Firefox、Safari、Internet Explorer 11 などの最新のブラウザでサポートされている現在の標準。

どの値を使用するか?

選択値の値はブラウザの互換性要件によって異なります。 Firefox 2.0 などの古いブラウザのサポートが必要な場合は、display: box を使用する必要がある場合があります。ただし、互換性と柔軟性を最大限に高めるには、display: flex を選択することをお勧めします。

注:
一般的には、flex と box の両方を含めることをお勧めします。特にフレックスボックス仕様をサポートする古いブラウザ (IE10 など) をターゲットとする場合は、コード内のプロパティを使用します。これにより、ブラウザ間の一貫性が確保されます。

これらの値の違いとブラウザのサポートを理解することで、フレキシブル ボックス モデルを効果的に利用して、応答性が高く適応性のあるレイアウトを作成できます。

以上がフレックスボックスの混乱: 「display: flex」、「display: box」、「display: flexbox」の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。