0Pricing
CSS Academy · Lektion

Ausrichtung einzelner Flex-Items mit align-self überschreiben

Überschreiben Sie align-items des Containers für einzelne Flex-Items mit align-self.

Ausrichtung einzelner Flex-Items mit align-self überschreiben ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Was ist align-self?

align-self überschreibt die Einstellung align-items des Flex-Containers für ein bestimmtes Flex-Element. Es gilt für einzelne Elemente, nicht für den Container.

align-self-Werte

Akzeptiert dieselben Werte wie align-items:

  • auto — übernimmt align-items des Containers (Standard)
  • flex-start — richtet am Anfang der Querachse aus
  • flex-end — richtet am Ende der Querachse aus
  • center — zentriert auf der Querachse
  • stretch — dehnt sich auf die Größe der Querachse aus
  • baseline — richtet Textgrundlinien aus

Praktisches Beispiel

Eine Navigation, bei der die meisten Elemente zentriert, der letzte Button jedoch am Ende ausgerichtet ist:

<nav class="nav">
  <span>Logo</span>
  <a href="#">Link</a>
  <button class="cta-button">Sign Up</button>
</nav>

Ein einzelnes Element ausdehnen

Lassen Sie eine Karte die volle Höhe einnehmen, während sich die anderen an ihre Inhalte anpassen:

<div class="sidebar-layout">
  <div>Content</div>
  <div class="ad-unit">Ad</div>
</div>

margin: auto zur Ausrichtung

Automatische Außenabstände an Flex-Elementen verschieben das Element selbst (oder Geschwisterelemente) auf die gegenüberliegende Seite. Dies ist eine leistungsfähige Alternative zu align-self zum Zentrieren oder Verteilen von Platz.

<nav class="nav">
  <span class="logo">Logo</span>
  <a href="#">Home</a>
  <a href="#">About</a>
  <span class="settings">&#9881;</span>
</nav>

margin: auto zum vertikalen Zentrieren

Automatische Außenabstände funktionieren auch vertikal. margin-top: auto innerhalb eines Flex-Containers mit Spaltenrichtung verschiebt ein Element nach unten:

<div class="card">
  <p>Card body</p>
  <div class="card-footer">Footer</div>
</div>

Ausrichtung an der Grundlinie

Die Ausrichtung an der Textgrundlinie sorgt für gut lesbare Beziehungen zwischen Elementen unterschiedlicher Größe:

<div class="stats-row">
  <span class="big-number">42</span>
  <span class="label">users</span>
</div>

align-self: auto (Standard)

align-self: auto weist das Element an, den Wert align-items des Containers zu verwenden. Sie müssen align-self nur festlegen, wenn Sie von der Standardeinstellung des Containers abweichen möchten.

Querachse und Hauptachse

Denken Sie daran: align-self wirkt immer auf der Querachse. Bei flex-direction: column verläuft die Querachse horizontal, daher steuert align-self die Positionierung nach links und rechts.

align-self mit flex-grow kombinieren

Ein gängiges Muster: Ein Element so wachsen lassen, dass es den verfügbaren Platz ausfüllt UND seine Ausrichtung auf der Querachse überschreiben:

<div class="features">
  <div class="feature-card">Feature A</div>
  <div>Feature B</div>
</div>

Ausrichtung in Grid und Flexbox

CSS Grid verfügt für die 2D-Steuerung sowohl über align-self (Zeilenachse) als auch über justify-self (Spaltenachse). Das align-self von Flexbox steuert nur die Querachse – verwenden Sie margin: auto für die Hauptachse.

Schnelltest

Ein Flex-Container hat align-items: center. Ein Element muss am Anfang der Querachse ausgerichtet werden. Welche Eigenschaft sollten Sie für dieses Element festlegen?

Zusammenfassung

align-self überschreibt bei einzelnen Elementen die Einstellung align-items des Flex-Containers. Verwenden Sie es, um das Ausrichtungsmuster für bestimmte Elemente zu durchbrechen. margin: auto ist ein ergänzendes Werkzeug, das den verbleibenden Platz verteilt und Elemente entlang einer der beiden Achsen verschiebt.

Häufig gestellte Fragen

Ist die Lektion „Ausrichtung einzelner Flex-Items mit align-self überschreiben“ kostenlos?

Ja — der vollständige Text von „Ausrichtung einzelner Flex-Items mit align-self überschreiben“ 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 „Ausrichtung einzelner Flex-Items mit align-self überschreiben“?

Überschreiben Sie align-items des Containers für einzelne Flex-Items mit align-self. 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 1 von 4.

Wie lange dauert die Lektion „Ausrichtung einzelner Flex-Items mit align-self überschreiben“?

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

  1. Ausrichtung einzelner Flex-Items mit align-self überschreiben
  2. order-Eigenschaft und visuelle Neuordnung
  3. Muster für die Flex-Kurzschreibweise
  4. Gängige Flexbox-Layouts: Navigation, Karten, Media Object
← Zurück zu CSS Academy