さまざまな画面サイズに合わせて Flexbox 項目を効率的に再配置するにはどうすればよいですか?

フレックス順序プロパティ: モバイル ビューとデスクトップ ビューの項目の再配置

コンテナ内の項目のレイアウトを管理する場合、順序プロパティとフレックスボックスは強力なツールとなり得ます。ただし、特にモバイルおよび大画面ビュー向けに項目を再配置しようとすると、問題が発生する可能性があります。

次のシナリオを考えてみましょう: コンテナ内に 3 つの div があり、モバイルでは順序が 2、1、3 に設定されているとします。 order プロパティを使用します。これはモバイルデバイスでもうまく機能します。ただし、大きな画面では、順序が正しく表示されません。

この問題の根本原因は、フレックスボックスの性質にあります。 Flexbox は、コンテナ内のスペースを分散してコンテンツを整列するように設計されています。行ラップコンテナでは、アイテムが任意にラップできるグリッドシステムとは異なり、アイテムは新しい行にラップする必要があります。

したがって、フレックスボックスコンテナでは、アイテム div3 はアイテム div2 の下にラップできません。グリッドが作成されるためです。直線的な列ではなくレイアウトのようなものです。その結果、行内で最も高くないアイテム間に隙間が生じます。

このような見苦しい隙間を避けるには、行の折り返しではなく列の折り返しを使用することを検討してください。列ラップコンテナでは、項目が新しい列にラップされ、div2 と div3 を垂直方向に整列できるレイアウトが可能になります。

例:

.container {
    display: flex;
    flex-direction: column;
    height: 200px;
}
div.orange {
  background-color: orange;
}
div.blue {
  order: -1;
  background-color: aqua;
}
div.green {
  background-color: lightgreen;
}
.container > div {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 800px) {
    .container {
        flex-wrap: wrap;
    }
    div.orange {
        flex-basis: 100%;
        width: 50%;
    }
    div.blue {
        flex-basis: 50%;
        width: 50%;
        order: 0;
    }
    div.green {
        flex-basis: 50%;
        width: 50%;
    }
}

この例では、モバイル レイアウトは次の内容を維持します。デスクトップ レイアウトでは項目が 2、1、3 の順序で再配置されますが、項目は垂直方向に折り返されるのではなく、垂直方向に折り返されるため、隙間が解消されます。水平方向。

以上がさまざまな画面サイズに合わせて Flexbox 項目を効率的に再配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。