「display: inline-flex」が期待どおりに要素を垂直に整列しないのはなぜですか?

Display:inline-flex と Display:flex の違い

指定された ID ラッパー内で要素を垂直方向に整列させようとすると、開発者はID の表示プロパティをフレックス コンテナとして「inline-flex」に設定します。その目的は、ラッパー内の要素がインラインで表示されることです。ただし、プレゼンテーションに目に見える違いはありません。

説明

「display:inline-flex」と「display:flex」の違いは、フレックスアイテムではなくフレックスコンテナです。 「display:inline-flex」はコンテナをインラインで表示するように設定しますが、「display:flex」はコンテナをブロックレベルの要素として設定します。

コンテナの表示の違いにもかかわらず、両方の「display:inline-flex」は同じです。および「display:flex」を使用すると、フレックス項目の動作は同じになります。フレックス項目は一貫してブロックレベルのボックスとして機能し、いくつかのインラインブロック特性を示します。したがって、フレックス レイアウトの整合性が損なわれるため、フレックス アイテムをインラインで表示することはできません。

代替アプローチ

説明によると、フレックスボックスは要素の望ましい垂直方向の配置またはインライン表示を実現するための適切なソリューション。要素の書式設定に対するアプローチがフレックスボックスとは異なる、プレーンなインライン レイアウトまたはインライン ブロック レイアウトの実装を検討してください。

以上が「display: inline-flex」が期待どおりに要素を垂直に整列しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。