Kostenlose Tutorials für Anfänger

Appearance

Kapitel 7: Ausrichtung auf der Querachse (align-items + align-content) ​

7.1 align-items: Ausrichtung einzelner Elemente auf der Querachse ​

Definition:align-items steuert, wie Flex-Elemente entlang der Querachse (Cross Axis) im Container ausgerichtet werden.

Wichtig:

  • align-items wirkt nur auf der Querachse
  • Wenn flex-direction: row → vertikal
  • Wenn flex-direction: column → horizontal

Syntax:

css
.container {
  display: flex;
  align-items: <wert>;
}

5 häufige Werte von align-items ​

1. stretch (Standardwert) ​

Verhalten:

  • Elemente werden gestreckt, um die gesamte Höhe (bei row) oder Breite (bei column) des Containers einzunehmen
  • Wenn Elemente eine feste Höhe/Breite haben, wird stretch ignoriert

CSS:

css
.container {
  display: flex;
  align-items: stretch;  /* Standard */
  height: 300px;  /* Damit Stretch sichtbar ist */
  border: 2px solid #333;
  padding: 10px;
}

.item {
  /* Keine feste Höhe! Sonst wirkt stretch nicht */
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
  width: 100px;
}

Ergebnis (bei flex-direction: row):

┌────────────────────────────────────┐
│ [1]                               │  ← Volle Höhe (300px)
│ [2]                               │
│ [3]                               │
└────────────────────────────────────┘

2. flex-start ​

Verhalten:

  • Elemente werden am Anfang der Querachse ausgerichtet
  • Bei row: Obenbündig
  • Bei column: Linksbündig

CSS:

css
.container {
  display: flex;
  align-items: flex-start;
  height: 300px;
  border: 2px solid #333;
  padding: 10px;
}

.item {
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
}

Ergebnis (bei flex-direction: row):

┌────────────────────────────────────┐
│ [1] [2] [3]                      │  ← Obenbündig
│                                    │
│                                    │
└────────────────────────────────────┘

3. flex-end ​

Verhalten:

  • Elemente werden am Ende der Querachse ausgerichtet
  • Bei row: Untenbündig
  • Bei column: Rechtsbündig

CSS:

css
.container {
  display: flex;
  align-items: flex-end;
  height: 300px;
  border: 2px solid #333;
  padding: 10px;
}

Ergebnis (bei flex-direction: row):

┌────────────────────────────────────┐
│                                    │
│                                    │
│ [1] [2] [3]                      │  ← Untenbündig
└────────────────────────────────────┘

4. center (HÄUFIG VERWENDET!) ​

Verhalten:

  • Elemente werden in der Mitte der Querachse zentriert

CSS:

css
.container {
  display: flex;
  align-items: center;  /* Vertikal zentrieren */
  height: 300px;
  border: 2px solid #333;
  padding: 10px;
}

Ergebnis (bei flex-direction: row):

┌────────────────────────────────────┐
│                                    │
│      [1] [2] [3]                  │  ← Vertikal zentriert
│                                    │
└────────────────────────────────────┘

Häufiger Anwendungsfall: Perfekte Zentrierung (horizontal + vertikal)

css
.container {
  display: flex;
  justify-content: center;  /* Horizontal zentrieren */
  align-items: center;      /* Vertikal zentrieren */
  height: 300px;
}

Ergebnis:

┌────────────────────────────────────┐
│                                    │
│         [1] [2] [3]               │  ← Perfekt zentriert!
│                                    │
└────────────────────────────────────┘

5. baseline ​

Verhalten:

  • Elemente werden an ihrer Text-Baseline ausgerichtet
  • Nützlich, wenn Elemente unterschiedliche Schriftgrößen haben

CSS:

css
.container {
  display: flex;
  align-items: baseline;
  border: 2px solid #333;
  padding: 10px;
}

.item1 { font-size: 16px; }
.item2 { font-size: 24px; }
.item3 { font-size: 32px; }

Ergebnis:

┌────────────────────────────────────┐
│ [1]    [2]      [3]               │  ← An Baseline ausgerichtet
└────────────────────────────────────┘

7.2 align-content: Ausrichtung mehrzeiliger Inhalte auf der Querachse ​

Definition:align-content steuert, wie Zeilen (bei Umbruch) entlang der Querachse im Container ausgerichtet werden.

Wichtig:

  • align-content wirkt nur wenn flex-wrap: wrap oder wrap-reverse gesetzt ist
  • Bei einzeiligen Flex-Containern hat align-content keine Wirkung

Syntax:

css
.container {
  display: flex;
  flex-wrap: wrap;  /* MUSS gesetzt sein! */
  align-content: <wert>;
  height: 400px;  /* Höhe für Demonstration */
}

6 Werte von align-content ​

1. stretch (Standardwert) ​

Verhalten:

  • Zeilen werden gestreckt, um den verfügbaren Platz auf der Querachse gleichmäßig zu füllen

CSS:

css
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;  /* Standard */
  height: 400px;
  border: 2px solid #333;
  padding: 10px;
}

.item {
  width: 150px;  /* Breite erzwingt Umbruch */
  height: 80px;
  background-color: lightblue;
  margin: 5px;
}

Ergebnis:

┌────────────────────────────────────┐
│ [1] [2] [3]                       │  ← Zeile 1 (gestreckt)
│────────────────────────────────────│
│ [4] [5]                           │  ← Zeile 2 (gestreckt)
│                                    │
└────────────────────────────────────┘

2. flex-start ​

Verhalten:

  • Zeilen werden am Anfang der Querachse ausgerichtet
  • Bei row: Obenbündig

CSS:

css
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 400px;
  border: 2px solid #333;
}

Ergebnis:

┌────────────────────────────────────┐
│ [1] [2] [3]                       │  ← Zeile 1 (oben)
│ [4] [5]                           │  ← Zeile 2 (direkt darunter)
│                                    │
│                                    │
└────────────────────────────────────┘

3. flex-end ​

Verhalten:

  • Zeilen werden am Ende der Querachse ausgerichtet
  • Bei row: Untenbündig

CSS:

css
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  height: 400px;
  border: 2px solid #333;
}

Ergebnis:

┌────────────────────────────────────┐
│                                    │
│                                    │
│ [1] [2] [3]                       │  ← Zeile 1 (unten)
│ [4] [5]                           │  ← Zeile 2 (darüber)
└────────────────────────────────────┘

4. center ​

Verhalten:

  • Zeilen werden in der Mitte der Querachse zentriert

CSS:

css
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 400px;
  border: 2px solid #333;
}

Ergebnis:

┌────────────────────────────────────┐
│                                    │
│ [1] [2] [3]                       │  ← Zeilen zentriert
│ [4] [5]                           │
│                                    │
└────────────────────────────────────┘

5. space-between ​

Verhalten:

  • Erste Zeile am Anfang, letzte am Ende
  • Gleicher Abstand zwischen den Zeilen

CSS:

css
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 400px;
  border: 2px solid #333;
}

Ergebnis:

┌────────────────────────────────────┐
│ [1] [2] [3]                       │  ← Erste Zeile oben
│                                    │
│                                    │
│ [4] [5]                           │  ← Letzte Zeile unten
└────────────────────────────────────┘

6. space-around ​

Verhalten:

  • Gleicher Abstand um jede Zeile
  • Äußerer Rand ist halber Abstand im Vergleich zu den Abständen zwischen Zeilen

CSS:

css
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  height: 400px;
  border: 2px solid #333;
}

Ergebnis:

┌────────────────────────────────────┐
│                                    │
│ [1] [2] [3]                       │  ← Abstand oben halb
│                                    │
│ [4] [5]                           │  ← Abstand unten halb
│                                    │
└────────────────────────────────────┘

7.3 Unterschied zwischen align-items und align-content (Wichtig!) ​

EigenschaftWirkungWann wird es angewendet?
align-itemsAusrichtung einzelner Elemente auf der QuerachseImmer (ein- oder mehrzeilig)
align-contentAusrichtung von Zeilen auf der QuerachseNur bei mehrzeiligen Containern (flex-wrap: wrap)

Praxisbeispiel: Unterschied verdeutlichen ​

Szenario 1: Einzeilig (align-content wirkt NICHT)

css
.container {
  display: flex;
  flex-wrap: nowrap;  /* Ein Zeile! */
  align-items: center;    /* Wirkt! */
  align-content: center;  /* WIRKT NICHT! */
  height: 300px;
}

Szenario 2: Mehrzeilig (beide wirken)

css
.container {
  display: flex;
  flex-wrap: wrap;       /* Mehrere Zeilen! */
  align-items: center;    /* Wirkt: Elemente innerhalb ihrer Zeile zentrieren */
  align-content: center;  /* Wirkt: Zeilen als Ganzes zentrieren */
  height: 400px;
}

Wichtigste Erkenntnis:

align-items zentriert Elemente innerhalb ihrer Zeile. align-content zentriert die Zeilen als Ganzes im Container.

7.4 Praxisbeispiel: Einzeilige/mehrzeilige Ausrichtung ​

Übung 1: Einzeiliger Container ​

HTML:

html
<div class="container single-line">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS:

css
.container {
  display: flex;
  flex-wrap: nowrap;  /* Ein Zeile */
  align-items: center;    /* Elemente vertikal zentrieren */
  /* align-content hat keine Wirkung! */
  height: 300px;
  border: 2px solid #333;
  margin-bottom: 20px;
}

.item {
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
}

Ergebnis:

  • Elemente sind vertikal zentriert (align-items: center)
  • align-content hat keine Wirkung (nur eine Zeile)

Übung 2: Mehrzeiliger Container ​

HTML:

html
<div class="container multi-line">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS:

css
.container {
  display: flex;
  flex-wrap: wrap;  /* Mehrere Zeilen! */
  align-items: center;    /* Elemente innerhalb jeder Zeile zentrieren */
  align-content: center;  /* Zeilen als Ganzes zentrieren */
  height: 400px;
  border: 2px solid #333;
}

.item {
  width: 150px;  /* Erzwingt Umbruch */
  padding: 20px;
  background-color: lightblue;
  margin: 5px;
}

Ergebnis:

  • Elemente sind innerhalb jeder Zeile vertikal zentriert (align-items: center)
  • Zeilen als Ganzes sind im Container vertikal zentriert (align-content: center)

Zusammenfassung ​

In diesem Kapitel hast du gelernt:

  • ✅ align-items: Ausrichtung einzelner Elemente auf der Querachse
  • ✅ 5 häufige Werte: stretch, flex-start, flex-end, center, baseline
  • ✅ align-content: Ausrichtung von Zeilen auf der Querachse (nur bei Umbruch!)
  • ✅ 6 Werte: stretch, flex-start, flex-end, center, space-between, space-around
  • ✅ Den wichtigen Unterschied zwischen align-items und align-content

Nächstes Kapitel: In Kapitel 8 lernen wir Flex-Element-Eigenschaften kennen: order und align-self.

Übungsaufgaben ​

Aufgabe 7.1 ​

Erstelle einen Container mit 3 Elementen. Verwende align-items: center und justify-content: center, um die Elemente perfekt zu zentrieren.

Aufgabe 7.2 ​

Erstelle einen Container mit 6 Elementen und flex-wrap: wrap. Experimentiere mit verschiedenen align-content Werten und beobachte den Unterschied.

Aufgabe 7.3 ​

Erstelle einen Container mit 2 Zeilen. Setze align-items: flex-start und align-content: space-between. Beobachte, wie beide Eigenschaften zusammenwirken.

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials