ネストされたコンテナを使用せずに、Flexbox アイテムを別のビューポートに再配置するにはどうすればよいですか?

異なるビューポート上でフレックス順序で要素を再配置する

3 つの div が 1、2、3 の順序で配置されたコンテナがあります。モバイルでは利用できますが、大きな画面では課題に直面しています。フレックス プロパティとオーダー プロパティはモバイルでは効果的に機能するように見えますが、デスクトップでは目的の配置を生成できません。

行折り返しのフレックスボックスの制限

重要な問題は次のとおりです。行の折り返しに関しては、フレックスボックスに固有の制限があります。フレックス項目は新しい行にのみ折り返すことができるため、同じ行内の他の項目の下に折り返されることはできません。これにより、デスクトップ レイアウトにギャップが生じ、短い項目が正しく配置されなくなります。

代替ソリューション

目的のレイアウトを実現するには、div 2 と 3 をラップする 1 つの方法があります。追加のコンテナに入れます。これにより、垂直方向のフレックス方向を持つネストされたフレックス コンテナが作成され、項目が隙間なく正しく配置されます。ただし、この解決策は、すべての項目が同じ親を共有するという要件と矛盾します。

解決策としての列の折り返し

あるいは、行の折り返しではなく列の折り返しを使用することを検討してください。 。コンテナを列フレックスボックスとして定義すると、項目を垂直方向に整列させ、隙間をなくすことができます。デスクトップでは、コンテナをフレックス ラップに切り替えることができ、div 2 と 3 を必要に応じて再配置できます。

このアプローチでは、フレックス プロパティを調整し、モバイル ビューとデスクトップ ビューの両方で適切な配置を確保するために追加の CSS 変更が必要です。

以上がネストされたコンテナを使用せずに、Flexbox アイテムを別のビューポートに再配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。