Wie kann ich Flexbox-Elemente für verschiedene Bildschirmgrößen effizient neu anordnen?

Flex-Bestelleigenschaft: Elemente für Mobil- und Desktop-Ansichten neu anordnen

Beim Verwalten des Layouts von Elementen innerhalb eines Containers wird die Bestelleigenschaft zusammen mit Flexbox kann ein leistungsstarkes Werkzeug sein. Beim Versuch, Elemente speziell für Mobilgeräte und größere Bildschirmansichten neu anzuordnen, kann es jedoch zu Herausforderungen kommen.

Stellen Sie sich das folgende Szenario vor: Sie haben drei Divs in einem Container, wobei die Reihenfolge auf Mobilgeräten auf 2, 1 und 3 festgelegt ist Verwenden der order-Eigenschaft. Dies funktioniert gut auf mobilen Geräten. Auf größeren Bildschirmen erscheint die Reihenfolge jedoch falsch.

Die Hauptursache für dieses Problem liegt in der Natur der Flexbox. Flexbox wurde entwickelt, um Inhalte durch die Verteilung des Platzes innerhalb des Containers auszurichten. In einem Zeilenumbruch-Container müssen Elemente in neue Zeilen umgebrochen werden, im Gegensatz zu einem Rastersystem, in dem Elemente beliebig umgebrochen werden können.

Daher kann in einem Flexbox-Container Element div3 nicht unter Element div2 umgebrochen werden, da dadurch ein Raster erstellt würde. eher ein ähnliches Layout als eine gerade Reihe. Dadurch entstehen Lücken zwischen Elementen, die nicht die höchsten in der Zeile sind.

Um diese unschönen Lücken zu vermeiden, sollten Sie die Verwendung von Spaltenumbrüchen anstelle von Zeilenumbrüchen in Betracht ziehen. In einem Spaltenumbruch-Container werden Elemente in neue Spalten umgebrochen, was ein Layout ermöglicht, bei dem div2 und div3 vertikal ausgerichtet werden können.

Zum Beispiel:

.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%;
    }
}

In diesem Beispiel wird das mobile Layout beibehalten in der Reihenfolge 2, 1, 3, während das Desktop-Layout die Elemente in 1, 2, 3 neu anordnet. Die Lücken werden eliminiert, da Elemente statt vertikal umgebrochen werden horizontal.

Das obige ist der detaillierte Inhalt vonWie kann ich Flexbox-Elemente für verschiedene Bildschirmgrößen effizient neu anordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!