Wie kann ich Divs mithilfe von CSS basierend auf der Bildschirmbreite dynamisch neu anordnen?

Divs dynamisch basierend auf der Gerätebreite mit CSS neu anordnen

Bei der Erstellung responsiver Websites ist die Verwaltung der Anzeige und Reihenfolge von Elementen von entscheidender Bedeutung. Eine häufige Herausforderung entsteht, wenn Divs basierend auf der Bildschirmbreite neu angeordnet werden müssen. Während diese Aufgabe mit weniger Divs leicht gelöst werden kann, wird sie mit zunehmender Anzahl komplexer.

Spalten mit zwei Divs erstellen

Beginnen wir mit einem einfachen Szenario von zwei Divs nebeneinander. Zunächst können wir CSS verwenden, um zwei Spalten zu erstellen:

.container {
  width: 80%;
  margin: 0 auto;
}

.column-half {
  display: table-cell;
  padding: 25px;
  vertical-align: top;
  width: 40%;
}

.column-half-1 {
  float: left;
}

.column-half-2 {
  float: right;
}

Dieser Ansatz positioniert die Divs nebeneinander in breiteren Bildschirmen, stapelt sie jedoch vertikal, wenn der Bildschirm zu schmal ist.

Herausforderung mit vier Spalten

Die Ausweitung dieses Ansatzes auf vier Spalten wird problematisch. Durch die Verwendung von Floats können wir vier Spalten erstellen, die horizontal ausgerichtet sind. Allerdings kann diese Reihenfolge bei schmaleren Bildschirmen nicht einfach geändert werden.

Lösung mit Flexbox

Die Lösung für dieses Problem liegt in den Flexbox-Eigenschaften „Reihenfolge“ und „ Flex-Flow‘. Mit Flexbox können wir das Layout und die Reihenfolge von Elementen sowohl in Zeilen als auch in Spalten steuern. Mithilfe dieser Eigenschaften können wir die Reihenfolge der Divs in schmaleren Bildschirmen definieren, ohne das Layout in breiteren Bildschirmen zu beeinträchtigen:

.container {
  display: flex; /* Switches to a flex layout */
  flex-flow: column; /* Stacks elements vertically in narrower screens */
}

.column-quarter {
  width: 25%; /* Adjust percentage based on the number of columns */
}

.column-quarter-1 {
  order: 3; /* Defines the order in narrower screens */
}

.column-quarter-2 {
  order: 2;
}

.column-quarter-3 {
  order: 1;
}

.column-quarter-4 {
  order: 4;
}

Diese Lösung stellt sicher, dass die Divs als Zeilen angezeigt werden, wenn die Bildschirmbreite dies zulässt, und sich dann automatisch neu anordnen in Spalten basierend auf der angegebenen Reihenfolge, wenn der Bildschirm schmaler wird. Diese Methode bewältigt effektiv die Herausforderung der dynamischen Verwaltung der Div-Reihenfolge sowohl im Zeilen- als auch im Spaltenlayout.

Das obige ist der detaillierte Inhalt vonWie kann ich Divs mithilfe von CSS basierend auf der Bildschirmbreite dynamisch neu anordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!