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

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 など) をターゲットとする場合は、コード内のプロパティを使用します。これにより、ブラウザ間の一貫性が確保されます。

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