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

CSS を使用してデバイスの幅に基づいて Div を動的に並べ替える

レスポンシブ Web サイトを作成する場合、要素の表示と順序の管理が不可欠になります。一般的な課題は、画面幅に基づいて div を並べ替える必要がある場合に発生します。このタスクは div の数が少ない場合は簡単に達成できますが、数が増えるとより複雑になります。

2 つの div を使用した列の作成

次の単純なシナリオから始めましょう。 2 つの div を並べて表示します。最初に、CSS を使用して 2 つの列を作成できます。

.container {
  width: 80%;
  margin: 0 auto;
}

.column-half {
  display: table-cell;
  padding: 25px;
  vertical-align: top;
  width: 40%;
}

.column-half-1 {
  float: left;
}

.column-half-2 {
  float: right;
}

このアプローチでは、広い画面では div を並べて配置しますが、画面が狭すぎる場合は垂直に積み重ねます。

4 列での挑戦

このアプローチを 4 列に拡張すると問題が発生します。 float を使用すると、水平に並んだ 4 つの列を作成できます。ただし、この順序は、狭い画面では簡単に変更できません。

Flexbox を使用した解決策

この問題の解決策は、Flexbox プロパティの 'order' と ' にあります。フレックスフロー」。フレックスボックスを使用すると、行と列の両方で要素のレイアウトと順序を制御できます。これらのプロパティを使用すると、広い画面のレイアウトを損なうことなく、狭い画面での div の順序を定義できます。

.container {
  display: flex; /* Switches to a flex layout */
  flex-flow: column; /* Stacks elements vertically in narrower screens */
}

.column-quarter {
  width: 25%; /* Adjust percentage based on the number of columns */
}

.column-quarter-1 {
  order: 3; /* Defines the order in narrower screens */
}

.column-quarter-2 {
  order: 2;
}

.column-quarter-3 {
  order: 1;
}

.column-quarter-4 {
  order: 4;
}

このソリューションにより、画面幅が許せば div が行として表示され、自動的に並べ替えられます。画面が狭くなったときに、指定された順序に基づいて列に分割されます。この方法は、行レイアウトと列レイアウトの両方で div 順序を動的に管理するという課題に効果的に対処します。

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