Gängige Flexbox-Layouts: Navigation, Karten, Media Object
Erstellen Sie praktische Navigationsleisten, Kartenraster und Media Objects mit Flexbox.
Gängige Flexbox-Layouts: Navigation, Karten, Media Object ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Flexbox-Muster wichtig sind
Bestimmte Layout-Muster kommen praktisch in jedem Webprojekt vor. Flexbox löst jedes davon effizient mit minimalem CSS. Wenn Sie diese Muster kennen, entwickeln Sie schneller und benötigen weniger Code.
Navigationsleisten-Muster
Eine horizontale Navigation mit einem Logo links und Links rechts:
<nav class="navbar">
<span class="logo">Brand</span>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
Zentrierter Hero-Bereich
In voller Höhe zentrierter Inhalt mit Flexbox:
<div class="hero">
<h1>Welcome</h1>
</div>
Kartenraster
Responsives Kartenraster mit Umbruch und gleichmäßigen Abständen:
<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
</div>
Medienobjekt
Das Medienobjekt – ein Bild mit fester Breite neben flexiblem Text – ist ein grundlegendes UI-Muster, das in Kommentaren, Social-Media-Beiträgen und Listenelementen verwendet wird:
<div class="media">
<img class="media-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="avatar" />
<div class="media-body">
<strong>Jane Doe</strong>
<p>Comment text goes here.</p>
</div>
</div>
Sticky Footer mit Flex
Platzieren Sie den Footer am unteren Rand, ohne feste Höhen festzulegen:
<main>Main content that grows to fill available space</main>
<footer>Footer</footer>
Schaltfläche mit Icon und Text
Vertikal zentriertes Icon und Text in einer Schaltfläche:
<button class="btn">
<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="currentColor"/></svg>
Download
</button>
Holy-Grail-Layout mit Flexbox
Holy-Grail-Layout mit drei Spalten (Header, Footer, Seitenleiste-Hauptinhalt-Seitenleiste):
<div class="holy-grail">
<div class="left-sidebar">Left</div>
<div class="main-content">Main</div>
<div class="right-sidebar">Right</div>
</div>
Formularzeile mit Beschriftungen
Ausgerichtete Paare aus Beschriftungen und Eingabefeldern in einer Formularzeile:
<div class="form-row">
<label>Email</label>
<input type="email" />
</div>
Miniaturbild-Galerie
Eine bildbasierte Galerie mit Umbruch:
<div class="gallery">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ff6347'/><circle cx='150' cy='150' r='100' fill='%231e90ff'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23667eea'/><circle cx='150' cy='150' r='100' fill='%23764ba2'/></svg>" alt="thumb" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><rect width='300' height='300' fill='%23ffd700'/><circle cx='150' cy='150' r='100' fill='%23ff6347'/></svg>" alt="thumb" />
</div>
Chip-/Tag-Liste
Chips/Tags mit Inline-Umbruch, die wie Text fließen:
<div class="tags">
<span class="tag">CSS</span>
<span class="tag">Flexbox</span>
<span class="tag">Layout</span>
</div>
Schnelltest
Was verhindert beim Medienobjekt-Muster, dass der Textbereich überläuft, wenn er eine lange, nicht umbrechbare Zeichenfolge enthält?
Zusammenfassung
Häufige Flexbox-Muster: Navigationsleiste (Logo + automatischer Außenabstand + Links), Hero-Bereich (Spalte + Zentrierung auf der Hauptachse), Medienobjekt (festes Bild + flex:1-Bereich mit min-width:0), Sticky Footer (Spalten-Body + flex:1-Hauptbereich), Kartenraster (Umbruch + flex:1 1 Xpx). Diese fünf Muster decken den Großteil der Layout-Anforderungen aus der Praxis ab.
Häufig gestellte Fragen
Ist die Lektion „Gängige Flexbox-Layouts: Navigation, Karten, Media Object“ kostenlos?
Ja — der vollständige Text von „Gängige Flexbox-Layouts: Navigation, Karten, Media Object“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Gängige Flexbox-Layouts: Navigation, Karten, Media Object“?
Erstellen Sie praktische Navigationsleisten, Kartenraster und Media Objects mit Flexbox. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Gängige Flexbox-Layouts: Navigation, Karten, Media Object“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Ausrichtung einzelner Flex-Items mit align-self überschreiben
- order-Eigenschaft und visuelle Neuordnung
- Muster für die Flex-Kurzschreibweise
- Gängige Flexbox-Layouts: Navigation, Karten, Media Object