画面サイズに基づいて CSS で Div の順序を変更するにはどうすればよいですか?

デバイスの幅に基づいて CSS で Div 順序を変更する

レスポンシブ Web サイトを作成する場合、要素の順序を管理する際に課題が発生するのが一般的です。画面サイズが変わります。 2 つまたは 3 つの div については単純な解決策が存在しますが、要素の数が増えると順序付けはより複雑になります。

この問題に対処するために、CSS のフレックスボックス仕様は、order プロパティと flex-flow プロパティを使用した強力なソリューションを提供します。これらのプロパティを使用すると、インライン ブロックの表示を維持しながら、要素を柔軟に順序付けできます。

次の解決策は、質問で説明されている要件を満たします。

• 要素は、最初は行として表示されます。
• 画面の幅が定義されたブレークポイントを下回ると、列レイアウトに移行します。
• 要素の順序は次のとおりです。列レイアウトを変更して、目的の配置を作成します。

HTML 構造:

<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 スタイル:

.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 が再配置されます。インラインブロックのレイアウトを維持し、コンテンツとサイズを維持しながら、指定された順序で。

以上が画面サイズに基づいて CSS で Div の順序を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。