Kostenlose Tutorials für Anfänger

Appearance

Kapitel 8: Sortierung und Ausrichtung von Elementen (order + align-self) ​

8.1 order: Reihenfolge der Elemente steuern ​

Definition:order bestimmt die visuelle Reihenfolge von Flex-Elementen. Elemente mit niedrigerem order-Wert werden zuerst angezeigt.

Standardwert:

  • Standardmäßig haben alle Elemente order: 0
  • Elemente mit gleichem order werden in der Reihenfolge des HTML-Codes angezeigt

Syntax:

css
.item {
  order: <ganzzahl>;  /* Kann positiv, negativ oder 0 sein */
}

Praxisbeispiel: Reihenfolge ändern ​

HTML (ursprüngliche Reihenfolge):

html
<div class="container">
  <div class="item item1">Element 1</div>
  <div class="item item2">Element 2</div>
  <div class="item item3">Element 3</div>
</div>

CSS (Standard ohne order):

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

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

Ergebnis (ohne order):

┌────────────────────────────────────┐
│ [Element 1] [Element 2] [Element 3] │
└────────────────────────────────────┘

Reihenfolge ändern mit order ​

CSS (mit order):

css
.item1 {
  order: 2;  /* Element 1 wird als 2. angezeigt */
}

.item2 {
  order: 1;  /* Element 2 wird als 1. angezeigt */
}

.item3 {
  order: 3;  /* Element 3 wird als 3. angezeigt */
}

Ergebnis (mit order):

┌────────────────────────────────────┐
│ [Element 2] [Element 1] [Element 3] │  ← Reihenfolge geändert!
└────────────────────────────────────┘

Negative order-Werte ​

CSS:

css
.item1 { order: -1; }  /* Ganz nach vorne */
.item2 { order: 0; }   /* Standard */
.item3 { order: 1; }   /* Nach hinten */

Ergebnis:

┌────────────────────────────────────┐
│ [Element 1] [Element 2] [Element 3] │  ← Mit negativem order
└────────────────────────────────────┘

Häufiger Anwendungsfall: Navigation mit Login-Button ​

HTML:

html
<nav class="navbar">
  <a href="#" class="nav-link">Home</a>
  <a href="#" class="nav-link">Über uns</a>
  <a href="#" class="nav-link">Kontakt</a>
  <a href="#" class="login-btn">Login</a>  <!-- Sollte rechts sein -->
</nav>

CSS (ohne order - Login ist am Ende):

css
.navbar {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #333;
}

.nav-link {
  color: white;
  text-decoration: none;
  margin-right: 20px;
}

.login-btn {
  color: white;
  text-decoration: none;
  background-color: #007bff;
  padding: 10px 20px;
  border-radius: 5px;
}

Ergebnis (ohne order):

┌────────────────────────────────────┐
│ Home Über uns Kontakt [Login]      │
└────────────────────────────────────┘

CSS (mit order - Login nach rechts schieben):

css
.navbar {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #333;
}

.nav-link {
  color: white;
  text-decoration: none;
  margin-right: 20px;
}

.login-btn {
  color: white;
  text-decoration: none;
  background-color: #007bff;
  padding: 10px 20px;
  border-radius: 5px;
  margin-left: auto;  /* Oder: order: 1;  */
}

Besser: margin-left: auto verwenden!

css
.login-btn {
  margin-left: auto;  /* Schiebt Login ganz nach rechts */
}

Ergebnis (mit margin-left: auto):

┌────────────────────────────────────┐
│ Home Über uns Kontakt        [Login]│  ← Login ganz rechts
└────────────────────────────────────┘

8.2 align-self: Einzelne Elemente anders ausrichten ​

Definition:align-self erlaubt es, die Ausrichtung eines einzelnen Flex-Elements auf der Querachse zu überschreiben. Es überschreibt den Wert von align-items des Containers.

Syntax:

css
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Standardwert:

  • align-self: auto (übernimmt den Wert von align-items des Containers)

Werte von align-self ​

1. auto (Standard) ​

Verhalten:

  • Element übernimmt den Wert von align-items des Containers

CSS:

css
.container {
  display: flex;
  align-items: center;  /* Alle Elemente zentriert */
}

.item {
  align-self: auto;  /* Übernimmt "center" vom Container */
}

2. flex-start ​

Verhalten:

  • Element wird am Anfang der Querachse ausgerichtet (ignoriert align-items)

CSS:

css
.container {
  display: flex;
  align-items: center;  /* Container zentriert */
  height: 300px;
  border: 2px solid #333;
}

.item1 {
  align-self: flex-start;  /* Aber dieses Element oben */
}

Ergebnis:

┌────────────────────────────────────┐
│ [Element 1]                        │  ← Oben (flex-start)
│      [Element 2] [Element 3]       │  ← Zentriert (center)
└────────────────────────────────────┘

3. flex-end ​

Verhalten:

  • Element wird am Ende der Querachse ausgerichtet

CSS:

css
.item2 {
  align-self: flex-end;  /* Dieses Element unten */
}

4. center ​

Verhalten:

  • Element wird in der Mitte der Querachse zentriert

CSS:

css
.item3 {
  align-self: center;  /* Dieses Element zentriert */
}

5. stretch ​

Verhalten:

  • Element wird gestreckt, um den verfügbaren Platz auf der Querachse zu füllen

CSS:

css
.item1 {
  align-self: stretch;  /* Dieses Element gestreckt */
}

6. baseline ​

Verhalten:

  • Element wird an der Text-Baseline ausgerichtet

CSS:

css
.item2 {
  align-self: baseline;  /* An Baseline ausrichten */
}

Praxisbeispiel: Einzelne Elemente anders ausrichten ​

HTML:

html
<div class="container">
  <div class="item item1">Element 1</div>
  <div class="item item2">Element 2</div>
  <div class="item item3">Element 3</div>
</div>

CSS (Container zentriert alle Elemente, aber wir überschreiben einzelne):

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

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

/* Einzelne Elemente überschreiben */
.item1 {
  align-self: flex-start;  /* Oben */
  background-color: lightcoral;
}

.item2 {
  align-self: center;  /* Zentriert (wie Container) */
  background-color: lightgreen;
}

.item3 {
  align-self: flex-end;  /* Unten */
  background-color: lightyellow;
}

Ergebnis:

┌────────────────────────────────────┐
│ [Element 1] (oben)                │
│      [Element 2] (zentriert)      │
│            [Element 3] (unten)    │
└────────────────────────────────────┘

8.3 Praxisszenario: Spezifische Elemente anordnen und ausrichten ​

HTML:

html
<div class="card-container">
  <div class="card">Normale Karte 1</div>
  <div class="card featured">Featured Karte</div>  <!-- Soll hervorgehoben sein -->
  <div class="card">Normale Karte 2</div>
</div>

CSS:

css
.card-container {
  display: flex;
  align-items: stretch;  /* Alle Karten gleich hoch */
  gap: 20px;
  padding: 20px;
}

.card {
  flex: 1;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 8px;
}

/* Featured Karte größer und anders ausgerichtet */
.featured {
  flex: 2;  /* Nimmt doppelt so viel Platz ein */
  align-self: flex-start;  /* Aber oben ausgerichtet */
  background-color: #007bff;
  color: white;
}

Ergebnis:

  • Featured Karte ist breiter (flex: 2)
  • Aber oben ausgerichtet (align-self: flex-start)
  • Andere Karten sind gestreckt (align-items: stretch)

HTML:

html
<nav class="navbar">
  <div class="logo">Logo</div>
  <div class="nav-links">
    <a href="#">Home</a>
    <a href="#">Über uns</a>
    <a href="#">Kontakt</a>
  </div>
</nav>

CSS:

css
.navbar {
  display: flex;
  align-items: center;  /* Alle Elemente zentriert */
  padding: 20px;
  background-color: #333;
  color: white;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 20px;
  margin-left: auto;  /* Nach rechts schieben */
}

.nav-links a {
  color: white;
  text-decoration: none;
}

/* Logo leicht nach oben schieben */
.logo {
  align-self: flex-start;  /* Logo oben ausrichten */
}

Zusammenfassung ​

In diesem Kapitel hast du gelernt:

  • ✅ order: Reihenfolge von Flex-Elementen ändern (niedriger = früher)
  • ✅ align-self: Einzelne Elemente anders ausrichten (überschreibt align-items)
  • ✅ Praxisbeispiele für beide Eigenschaften

Nächstes Kapitel: In Kapitel 9 lernen wir flex-grow, flex-shrink und flex-basis kennen (Größe von Flex-Elementen steuern).

Übungsaufgaben ​

Aufgabe 8.1 ​

Erstelle einen Container mit 3 Elementen. Ändere die Reihenfolge mit order, sodass Element 3 zuerst, Element 1 als zweites und Element 2 als drittes angezeigt wird.

Aufgabe 8.2 ​

Erstelle einen Container mit 3 Elementen. Zentriere alle Elemente mit align-items: center, aber lasse Element 2 oben ausgerichtet sein (align-self: flex-start).

Aufgabe 8.3 ​

Erstelle eine Navigation mit Logo links und Links rechts. Verwende margin-left: auto für die Links.

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials