Zum Inhalt springen

Vertiefung 6: Fortgeschrittene CSS-Techniken und Layouts

Schritt 3 von 7

Flexbox ist sehr flexibel, erlaubt es, Layouts dynamisch zu gestalten. Beispielsweise können wir die Anordnung der Elemente umkehren oder in Spalten verteilen. Hier ist ein Beispiel, wie wir einen Layout-Wechsel implementieren:

/* CSS */
.container {
display: flex;
flex-direction: row; /* Horizontale Anordnung */
justify-content: space-around;
align-items: center;
}
 
@media (max-width: 600px) {
.container {
flex-direction: column; /* Vertikale Anordnung bei kleineren Fenstern */
}
}