Flexbox の「order」プロパティを複雑なマルチスクリーン レイアウトに効果的に使用するにはどうすればよいですか?

複数の画面レイアウトに Flex Order プロパティを使用する

さまざまな画面サイズに合わせて要素を再配置する場合は、flex プロパティとその order 属性を使用します。柔軟なソリューションを提供できます。ただし、特定のレイアウトを実現しようとすると、特定の課題が発生する可能性があります。

モバイル ビュー:

モバイルでは flex プロパティと order プロパティの使用が期待どおりに機能し、要素を順序付けできるようになります。注文値に従って。

デスクトップビュー:

ただし、同じ原則をより大きな画面ビューに適用すると、問題が発生します。フレックスボックスの行折り返しプロパティには、特定のレイアウトを実現することが困難になる制限があります。

問題:

指定された HTML 構造では、3 つの div が 1 つの内部に配置されています。ネストなしのコンテナ div。 flex プロパティと order プロパティを使用する目的は、デスクトップ ビュー上で要素を特定の順序で再配置することです。この問題は、順序プロパティが同じ行内で項目を折り返すことを許可していないために発生します。

解決策:

この問題を解決するには、列の折り返しを実装することを検討してください。行の折り返しの代わりに:

/*************** MOBILE *************/

.container {
  display: flex;
  flex-direction: column;
  height: 200px; /* necessary so items know where to wrap */
}
div.orange {
  background-color: orange;
}
div.blue {
  order: -1;
  background-color: aqua;
}
div.green {
  background-color: lightgreen;
}
.container > div {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/***************************/

@media screen and (min-width: 800px) {
  .container {
    flex-wrap: wrap;
  }
  div.orange {
    flex-basis: 100%;
    width: 50%;
  }
  div.blue {
    flex-basis: 50%;
    width: 50%;
    order: 0;
  }
  div.green {
    flex-basis: 50%;
    width: 50%;
  }
}

このアプローチでは、列の折り返しを利用して、デスクトップ ビュー上で要素を垂直方向に整列させます。 flex-direction プロパティは column に設定され、flex-wrap プロパティは適切なブレークポイントで折り返すように設定されます。希望の配置を達成するために注文値が調整されます。

以上がFlexbox の「order」プロパティを複雑なマルチスクリーン レイアウトに効果的に使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。