レスポンシブ レイアウトでアイテムを再配置するときに、Flex Order の制限をどのように克服できますか?

フレックス オーダー: レスポンシブ ビューのアイテムの再配置における課題

レスポンシブ レイアウトの設計において、フレックス オーダー プロパティは、異なる画面サイズでの要素の順序。ただし、特定のシナリオでは、フレックス コンテナーでの順序の使用に制限が生じる可能性があります。

問題: モバイルでは順序、デスクトップでは失敗

内部に 3 つの div があるレイアウトを考えてみましょう。モバイル画面上に垂直に配置されたコンテナ。フレックス順序を使用して、div を次のように再配置することを目指します: モバイルでは 2、1、3、デスクトップでは 1、2、3。ただし、デスクトップ ビューではレイアウトが崩れます。

根本原因: Flex との行の折り返しに互換性がない

この問題は、Flexbox が であるという事実に起因します。 row Wrap システム。項目が新しい行に折り返されることを意味します。私たちが望むレイアウトでは、ある項目が同じ行内で別の項目の下に折り返されるようにしたいと考えています。これは、ストレートなフレックス コンテナでは不可能です。

フレックス アイテムは、真っ直ぐで曲がらない行に限定されるため、行のラップを維持しながら div3 が div2 の下にラップすることはできません。これにより、見苦しい隙間やレイアウトの破損が生じます。

ネストされたコンテナと列の折り返し

考えられる解決策の 1 つは、div2 と div3 をそれぞれのコンテナ内でネストして、 div1 の兄弟。この新しいコンテナは、列のラップを備えたフレックス コンテナになり、ギャップがなくなり、項目が正しく配置されます。

ただし、このシナリオでは、ネストされたフレックス コンテナはすべての項目の要件に違反します。 order プロパティは親要素に適用する必要があるため、同じ親を持つ必要があります。

列の探索Wrap

別のアプローチは、コンテナーの行ラップの代わりに 列ラップ を使用することです。コンテナのフレックス方向を列に設定し、高さを固定することで、アイテムがどこで折り返されるかを制御できます。

この手法により、モバイル ビューとデスクトップ ビューの両方で望ましい再配置を実現できます。次に示すように、提供された CSS および HTML コード スニペット。

以上がレスポンシブ レイアウトでアイテムを再配置するときに、Flex Order の制限をどのように克服できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。