フレックス、ボックス、またはフレックスボックス: どの表示値を使用する必要がありますか?

フレキシブル ボックス モデル: 'flex'、'box'、および 'flexbox' 値のナビゲート

フレキシブル ボックス モデルの登場CSS3 ではパラダイム シフトが導入され、インラインやブロックなどの表示プロパティが段階的に廃止されました。ただし、フレキシブル ボックス モデルは、フレックス、ボックス、フレックスボックスなどのさまざまな値で表されることがよくあります。この記事では、これらの値の違いを詳しく説明し、その使用法に関するガイダンスを提供します。

表示: flex

表示: flex が現在の標準値です。 Chrome 29 、Firefox 22 、Safari 7 、Internet Explorer 11 などの最新のブラウザをサポートしています。 Flex は、水平軸と垂直軸の両方に沿ってアイテムを整列および配置する機能など、レイアウト管理のための高度な機能を提供します。

表示: ボックス

表示: ボックスは古いものです。フレキシブル ボックス モデルの開発の初期に導入された値です。これは、ベンダー プレフィックスを持つほとんどの主要なブラウザでサポートされていますが、通常、display: flex を優先して段階的に廃止されています。

Display: flexbox

Display: flexbox は別の中間値です。これは、display: box から display: flex への移行を橋渡しするために導入されました。これは、ベンダー プレフィックスを備えた新しいブラウザでサポートされており、機能の点では display: flex に似ています。

どの値を使用するか?

最終的には、次のどちらかを選択します。値は、サポートする必要があるブラウザによって異なります。下位互換性が必要な場合は、ブラウザーのプレフィックスを含む display: box の使用を検討してください。より最新のブラウザのサポートについては、表示: flex が推奨オプションです。

追加メモ

• ボックスの仕様は flexbox/flex の仕様と大幅に異なり、場合によっては望ましい結果を達成するのに必ずしも適しているとは限りません。
• ブラウザによっては、複数の表示値をサポートしている場合があります。ただし、将来の備えとして、可能な場合は flex プロパティを含めることをお勧めします。
• ブラウザの包括的なサポート情報については、caniuse.com/#feat=flexbox を確認してください。

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