CSS Academy · Lektion

Flex Wrap und Align-Content

Erlauben Sie Flex-Elementen, in mehrere Zeilen umzubrechen, und richten Sie die umgebrochenen Zeilen mit align-content aus.

Flex Wrap und Align-Content ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

flex-wrap: nowrap (Standard)

Standardmäßig erzeugen Flex-Elemente keinen Umbruch. Wenn die Elemente die Containerbreite überschreiten, werden sie verkleinert oder laufen über, statt in eine neue Zeile umzubrechen.

flex-wrap: wrap

Mit flex-wrap: wrap werden Elemente, die auf der Hauptachse überlaufen, in eine neue Zeile (oder bei einer Spaltenrichtung in eine neue Spalte) umgebrochen. Jede Umbruchzeile verhält sich wie ein eigener kleiner Flex-Container.

<div class="card-grid">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
    <div>Card 5</div>
  </div>

flex-wrap: wrap-reverse

wrap-reverse bricht Elemente in die entgegengesetzte Richtung der Querachse um: Neue Zeilen erscheinen bei einer Zeilenrichtung oberhalb statt unterhalb.

Muster für umbrechende Karten

Ein klassisches responsives Kartenlayout, bei dem die Karten bei kleiner werdendem Viewport in die nächste Zeile umbrechen:

<div class="cards">
    <div class="card">Card A</div>
    <div class="card">Card B</div>
    <div class="card">Card C</div>
  </div>

align-content für mehrere Zeilen

align-content steuert den Abstand zwischen umgebrochenen Zeilen auf der Querachse. Bei nur einer Zeile hat die Eigenschaft keine Wirkung. Die Werte entsprechen denen von justify-content.

Werte von align-content

Verfügbare Werte:

flex-start – Zeilen am Anfang der Querachse gruppieren
flex-end – Zeilen am Ende der Querachse gruppieren
center – Zeilen zentrieren
space-between – gleich große Abstände zwischen den Zeilen
space-around – gleich große Abstände um die Zeilen
stretch – Zeilen zum Ausfüllen des verfügbaren Platzes strecken (Standard)

<div class="gallery">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

align-items im Vergleich zu align-content

Der Unterschied:

align-items – richtet Elemente innerhalb jeder Flex-Zeile aus
align-content – richtet die Flex-Zeilen selbst innerhalb des Containers aus

Abstände in Flexbox

Die Eigenschaft gap (früher grid-gap) fügt gleichmäßige Abstände zwischen Flex-Elementen hinzu, ohne Ränder zu verwenden. Sie funktioniert sowohl für Zeilen- als auch für Spaltenabstände.

<div class="flex-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

Responsives Umbrechen ohne Media Queries

Erzeugen Sie automatisch so viele Spalten, wie mit einer festgelegten idealen Größe hineinpassen. Media Queries sind nicht erforderlich:

<div class="grid">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
  </div>

Kurzschreibweise flex-flow

flex-flow kombiniert flex-direction und flex-wrap in einer Deklaration:

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

Umbrechen im Vergleich zu Grid

Für komplexe zweidimensionale Layouts mit festgelegten Zeilen und Spalten ist CSS Grid besser geeignet. Das Umbrechen mit Flexbox eignet sich am besten für eindimensionale Inhalte, die zufällig in mehrere Zeilen fließen.

Kurzer Test

Welche Eigenschaft richtet die Umbruchzeilen selbst aus, wenn ein Flex-Container mehrere Zeilen enthält?

Zusammenfassung

flex-wrap: wrap ermöglicht es Elementen, in neue Zeilen umzubrechen. align-content steuert in einem mehrzeiligen Container den Abstand zwischen diesen Zeilen. Verwenden Sie gap für gleichmäßige Abstände. Kombinieren Sie flex: 1 1 250px mit flex-wrap, um responsive Kartenraster ohne Media Queries zu erstellen.

Häufig gestellte Fragen

Ist die Lektion „Flex Wrap und Align-Content“ kostenlos?

Ja — der vollständige Text von „Flex Wrap und Align-Content“ 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 „Flex Wrap und Align-Content“?

Erlauben Sie Flex-Elementen, in mehrere Zeilen umzubrechen, und richten Sie die umgebrochenen Zeilen mit align-content aus. 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 3 von 4.

Wie lange dauert die Lektion „Flex Wrap und Align-Content“?

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

← Zurück zu CSS Academy