CSS Flexbox を使用して画面幅に基づいて Div を並べ替えるにはどうすればよいですか?

デバイスの幅に応じて CSS で Div 順序を変更

レスポンシブ Web サイトを作成する場合、さまざまなデバイス間で目的のレイアウトを維持することができます。挑戦です。そのような問題の 1 つは、画面サイズが変更されたときの div の再配置です。小さな画面で div を垂直に積み重ねるのは簡単ですが、レイアウトに基づいて div を異なる順序で並べるのはより複雑になる可能性があります。

たとえば、div が 2 列あるシナリオを考えてみましょう。大きな画面では div は水平に表示されますが、画面幅が狭くなると垂直に積み重なって表示されます。ただし、垂直レイアウトでは div に特定の順序が必要です。

従来、このようなタスクには JavaScript が使用されていました。ただし、このシナリオでは JavaScript はオプションではありません。したがって、目標を達成するために、多用途の CSS フレックスボックス仕様に目を向けます。

「order」プロパティと「flex-flow」プロパティを使用して、要件を満たすレイアウトを作成できます。このソリューションは、IE10 のベンダー プレフィックスが付いているにもかかわらず、すべてのエバーグリーン ブラウザーと IE11 でサポートされていることに注意してください。

CSS では、幅、高さ、インライン ブロック表示などの div プロパティを定義します。また、各 div にカラー クラスを割り当てます。

次に、画面幅が 531px を下回ったときにアクティブになるメディア クエリを定義します。このクエリ内で、コンテナの表示プロパティを「flex」と「column」に変更して、狭い画面上で div が垂直方向にスタックされるようにします。

次に、div が垂直方向に表示される順序を指定します。レイアウト。 「order」プロパティを使用して、垂直スタックの上部近くに表示される div に高い順序の値を割り当てます。

説明のための例を次に示します:

.container div {
  width: 100px;
  height: 50px;
  display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
  .container {
    display: flex;
    flex-flow: column;
  }
  .five { order: 1; }
  .four { order: 2; }
  .three { order: 3; }
  .two { order: 4; }
  .one { order: 5; }
}

<div class="container">
  <div class="one">I'm first</div>
  <div class="two">I'm second</div>
  <div class="three">I'm third</div>
  <div class="four">I'm fourth</div>
  <div class="five">I'm fifth</div>
</div>

以上がCSS Flexbox を使用して画面幅に基づいて Div を並べ替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。