「display: inline-flex」が「display: flex」のように要素を垂直に整列させないのはなぜですか?

Display: Inline-Flex と Display: Flex の比較

display: inline- を使用して、指定されたラッパー内の要素を垂直方向に整列しようとする場合ラッパーの flex が期待どおりの結果を生成しませんでした。インラインで表示されるという予想に反して、要素は整列されていないままでした。

不一致の説明

display: inline-flex と display: flex の違いは次のとおりです。彼らのアプリケーションのターゲット。 Display: inline-flex は flex コンテナに影響を与えてインライン表示させますが、display: flex はコンテナ内の flex アイテムのレイアウトに影響を与えます。

したがって、display: inline-flex は flex アイテムをインラインで動作させません。 。代わりに、コンテナの表示に影響を与え、コンテナが周囲のテキストや要素とインラインで流れることを可能にします。本当の違いは、コンテナ自体の表示にあります。

その意味

フレックス項目に対するその後の調整は、コンテナがインラインで表示されるかどうかに関係なく、同じままになります。ブロックレベル。 Flexbox のレイアウトはコンテナの表示とは独立しています。フレックス項目は常にブロックレベルのボックスに似ており、インライン表示の可能性が排除されることに注意することが重要です。

代替考慮事項

目的の結果に垂直方向の配置が含まれる場合要素の数が多い場合、フレックスボックスは適切なソリューションではない可能性があります。従来のインライン レイアウト (display: inline または display: inline-block) に戻すことを検討してください。これにより、フレックスボックスの潜在的な複雑さを回避しながら、垂直方向の配置をより適切に制御できるようになります。

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