CSS とメディアクエリのみを使用して HTML ブロックの順序を逆にするにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS の柔軟性によるブロック順序の反転

モバイルデバイス用の CSS メディアクエリ

フレックスボックス並べ替え用

実践例

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS とメディアクエリのみを使用して HTML ブロックの順序を逆にするにはどうすればよいですか?

Barbara Streisand

Nov 30, 2024 pm 04:18 PM

How Can I Reverse the Order of HTML Blocks Using Only CSS and Media Queries?

CSS の柔軟性によるブロック順序の反転

提供された HTML 構造を考慮すると、ブロックのプロパティを維持しながら、CSS のみを使用してブロック要素の順序を切り替えることができます。詳細な解決策は次のとおりです:

モバイルデバイス用の CSS メディアクエリ

モバイルデバイスのブロック順序を変更するには、デバイスの最大幅をターゲットとする CSS メディアクエリを使用します:

@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1;
  }
}

ログイン後にコピー

このメディアクエリは #blockC の順序を 1 に設定し、ページの最初のブロックにします。

フレックスボックス並べ替え用

フレックスボックスは、子要素をその場で並べ替えることができる CSS レイアウトモジュールです。

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

#blockA {
  order: 1;
}

#blockC {
  order: 2;
}

#blockB {
  order: 3;
}

ログイン後にコピー

#parent コンテナ内で、フレックスボックスを適用して、ブロックの垂直方向の配置を可能にします。。次に、希望する順序に従って各ブロックの order プロパティを設定します。

実践例

JavaScript を使用した完全な例を次に示します。

<!DOCTYPE html>
<html>
  <head>
    <title>Block Reordering Example</title>
    <style>
      @media only screen and (max-device-width: 480px) {
        #blockC {
          order: 1;
        }
      }

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

      #blockA {
        order: 1;
      }

      #blockC {
        order: 2;
      }

      #blockB {
        order: 3;
      }
    </style>
  </head>
  <body>
    <div>

ログイン後にコピー

このコードスニペットは、画面サイズに基づいたブロック要素の並べ替え。ブラウザウィンドウのサイズを変更して、動作中のメディアクエリの効果を確認します。

以上がCSS とメディアクエリのみを使用して HTML ブロックの順序を逆にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。