CSS のみを使用して HTML ブロック要素を並べ替えるにはどうすればよいですか?

ブロック要素を並べ替える CSS

CSS のみを使用して HTML ブロック要素の順序を並べ替える方法を探すのは難しい場合があります。この質問は、ブロック要素としての表示動作を損なうことなく 3 つのブロックの順序を切り替えることを目的として、この問題に取り組みます。

CSS ソリューション

提供されるソリューションは CSS フレックスボックスを利用します。 。親要素をdisplay:flexおよびflex-flow:columnに設定すると、要素が垂直に積み上げられます。次に、order プロパティを使用して、子要素の順序をカスタマイズできます。たとえば、#a {order:2;} は、id="a" の要素を 2 番目の位置に移動します。

実装

このソリューションを実装するには、次のようにします。まず、親要素をフレックス コンテナとして表示するように設定します:

#parent { display: flex; flex-flow: column; }

次に、order プロパティを使用して子の順序を変更します。要素:

#a { order: 2; }
#b { order: 3; }
#c { order: 1; }

メディア クエリに関する考慮事項

さまざまな画面サイズに対応するために、メディア クエリを使用してレイアウトを制御できます。たとえば、次のルールは、最大幅が 300 ピクセルの画面のブロックの順序を切り替えます。

@media screen and (max-width: 300px) {
  #parent {
    display: flex;
    flex-flow: column;
  }
  #a { order: 2; }
  #b { order: 3; }
  #c { order: 1; }
}

Example

これは、簡略化された例です。概念を示します:

<div>

ブラウザ ウィンドウの幅を調整して、div の順序がどのように変化するかを観察します。要素が変更されます。

以上がCSS のみを使用して HTML ブロック要素を並べ替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。