Modul 7: Layouts mit Flexbox

lock
Bevorstehend

Erstelle flexible, responsive Layouts mit CSS Flexbox

Ziele dieses Moduls
  • Sie koennen Flexbox verwenden, um flexible Layouts und Navigationen zu erstellen
    Anwenden

Flexbox ist ein modernes Layout-System, das das Anordnen von Elementen unglaublich einfach macht. Ideal für Navigationen, Button-Gruppen und einfache Layouts.

Flexbox-Grundlagen

Flexbox arbeitet mit einem Container (Parent) und Items (Children). Der Container bekommt display: flex und kontrolliert, wie die Items angeordnet werden.

Die wichtigsten Properties für den Container:

  • display: flex - Aktiviert Flexbox
  • flex-direction - Richtung: row (Standard), column
  • justify-content - Horizontale Ausrichtung: flex-start, center, space-between, etc.
  • align-items - Vertikale Ausrichtung: flex-start, center, stretch
  • gap - Abstand zwischen Items
/* Navigation mit Flexbox */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #333;
}

.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

/* 3-Spalten Layout */
.container {
    display: flex;
    gap: 20px;
}

.column {
    flex: 1; /* Alle Spalten gleich breit */
    padding: 20px;
    background: #f5f5f5;
}

/* Zentrieren (horizontal & vertikal) */
.center-box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Flexbox für Items

Die Items selbst können auch gesteuert werden:

  • flex-grow - Wie viel Platz nimmt das Item ein? (Standard: 0)
  • flex-shrink - Kann das Item schrumpfen? (Standard: 1)
  • flex-basis - Startgrösse des Items
  • Kurzform: flex: 1 (gleich wie flex: 1 1 0)

Challenge

Übung: Responsive Navbar + 3-Spalten Layout

Erstelle eine Seite mit:

1. Navigation (Flexbox)

  • Logo/Name links
  • Menü-Links rechts (Home, About, Kontakt)
  • Beim Hover ändert sich die Link-Farbe

2. 3-Spalten Content-Bereich

  • Drei gleichbreite Spalten nebeneinander
  • Jede Spalte hat einen Titel und Text
  • Unterschiedliche Hintergrundfarben
  • 20px Abstand zwischen den Spalten

Bonus: Mache es responsive - auf schmalen Bildschirmen (max-width: 768px) sollen die Spalten untereinander stehen (flex-direction: column).

/* Tipp: Responsive mit Media Queries */

.columns {
    display: flex;
    gap: 20px;
}

.column {
    flex: 1;
    padding: 20px;
}

/* Auf kleinen Bildschirmen stapeln */
@media (max-width: 768px) {
    .columns {
        flex-direction: column;
    }
}

Note

Flexbox-Spickzettel: Schau dir flexboxfroggy.com an - ein spielerisches Tutorial zum Üben!