CSS Academy · Lektion

Justify-Content und Align-Items

Verteilen Sie Elemente entlang der Haupt- und Querachse mit justify-content und align-items.

Justify-Content und Align-Items ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Zwei wichtige Ausrichtungseigenschaften

Die beiden am häufigsten verwendeten Flex-Ausrichtungseigenschaften sind:

justify-content – richtet Elemente entlang der Hauptachse aus
align-items – richtet Elemente entlang der Querachse aus

justify-content: flex-start

flex-start (Standard) gruppiert die Elemente am Anfang der Hauptachse. Bei der Richtung row werden die Elemente links ausgerichtet.

<nav class="nav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

justify-content: center

Zentriert die Elemente entlang der Hauptachse. Die klassische Technik zum horizontalen Zentrieren mit Flexbox.

<div class="hero">
    <button>Get Started</button>
  </div>

justify-content: flex-end

Gruppiert die Elemente am Ende der Hauptachse (bei der Richtung row auf der rechten Seite).

<div class="header">
    <button>Sign In</button>
    <button>Sign Up</button>
  </div>

justify-content: space-between

Verteilt die Elemente mit gleich großen Abständen zwischen ihnen. Das erste Element steht am Anfang, das letzte am Ende – an den Rändern gibt es keinen Abstand.

<nav class="nav">
    <div class="logo">Logo</div>
    <div class="links">
      <a href="#">Home</a>
      <a href="#">About</a>
    </div>
  </nav>

justify-content: space-around

Platziert um jedes Element einen gleich großen Abstand. Die Elemente an den Rändern erhalten halb so viel Abstand wie die inneren Lücken. Dadurch ist der Abstand an den Rändern optisch halb so groß wie zwischen den Elementen.

justify-content: space-evenly

Alle Lücken, einschließlich der Randabstände, sind gleich groß. Anders als bei space-around entspricht der Randabstand den Lücken zwischen den Elementen.

<div class="toolbar">
    <button>Bold</button>
    <button>Italic</button>
    <button>Underline</button>
  </div>

align-items: stretch (Standard)

stretch (Standard) lässt alle Flex-Elemente entlang der Querachse die Größe des Containers auf der Querachse ausfüllen. In einem zeilenweisen Container werden alle Elemente gleich hoch.

<div class="row">
    <div>Short</div>
    <div>Taller content<br>spanning<br>multiple lines</div>
    <div>Mid</div>
  </div>

align-items: center

Zentriert die Elemente auf der Querachse. In einem zeilenweisen Container werden die Elemente dadurch vertikal zentriert. Die klassische Lösung zum vertikalen Zentrieren.

<div class="card">
    <span>👤</span>
    <span>Jane Doe</span>
  </div>

align-items: flex-start und flex-end

flex-start richtet die Elemente an der Anfangskante der Querachse aus (bei einer Zeile oben). flex-end richtet sie an der Endkante der Querachse aus (bei einer Zeile unten).

<nav class="nav">
    <div>Short</div>
    <div>Taller<br>nav<br>item</div>
  </nav>

align-items: baseline

Richtet die Elemente so aus, dass ihre Textgrundlinien übereinstimmen. Das ist nützlich, wenn die Elemente unterschiedliche Schriftgrößen haben, aber optisch bündig wirken sollen.

<nav class="breadcrumb">
    <span style="font-size:12px">Home</span>
    <span style="font-size:24px">Products</span>
    <span style="font-size:16px">Item</span>
  </nav>

Kurzer Test

Welche Kombination zentriert ein Flex-Element innerhalb seines Containers sowohl horizontal als auch vertikal genau?

Zusammenfassung

justify-content verteilt Elemente entlang der Hauptachse mit Werten wie flex-start, center und space-between. align-items positioniert Elemente auf der Querachse mit stretch, center und flex-start. Zusammen steuern sie die Ausrichtung auf beiden Achsen.

Häufig gestellte Fragen

Ist die Lektion „Justify-Content und Align-Items“ kostenlos?

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

Verteilen Sie Elemente entlang der Haupt- und Querachse mit justify-content und align-items. 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 2 von 4.

Wie lange dauert die Lektion „Justify-Content und Align-Items“?

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