Kostenlose Tutorials für Anfänger

Appearance

Kapitel 6: Ausrichtung auf der Hauptachse (justify-content) ​

6.1 Kernwirkung von justify-content ​

Definition:justify-content steuert, wie Flex-Elemente entlang der Hauptachse (Main Axis) im Container ausgerichtet werden.

Wichtig:

  • justify-content wirkt nur auf der Hauptachse
  • Wenn flex-direction: row → horizontal
  • Wenn flex-direction: column → vertikal

Syntax:

css
.container {
  display: flex;
  justify-content: <wert>;
}

6.2 6 häufig verwendete Werte ​

1. flex-start (Standardwert) ​

Verhalten:

  • Elemente werden am Anfang der Hauptachse ausgerichtet
  • Bei row: Linksbündig
  • Bei row-reverse: Rechtsbündig
  • Bei column: Oben

CSS:

css
.container {
  display: flex;
  justify-content: flex-start;  /* Standard */
  border: 2px solid #333;
  padding: 10px;
  width: 500px;  /* Breiterer Container für Demonstration */
}

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

Ergebnis (bei flex-direction: row):

┌────────────────────────────────────┐
│ [1] [2] [3]                      │  ← Elemente am linken Rand
└────────────────────────────────────┘

2. flex-end ​

Verhalten:

  • Elemente werden am Ende der Hauptachse ausgerichtet
  • Bei row: Rechtsbündig
  • Bei row-reverse: Linksbündig
  • Bei column: Unten

CSS:

css
.container {
  display: flex;
  justify-content: flex-end;
  border: 2px solid #333;
  padding: 10px;
  width: 500px;
}

Ergebnis (bei flex-direction: row):

┌────────────────────────────────────┐
│                      [1] [2] [3] │  ← Elemente am rechten Rand
└────────────────────────────────────┘

3. center (HÄUFIG VERWENDET!) ​

Verhalten:

  • Elemente werden in der Mitte der Hauptachse zentriert

CSS:

css
.container {
  display: flex;
  justify-content: center;
  border: 2px solid #333;
  padding: 10px;
  width: 500px;
}

Ergebnis (bei flex-direction: row):

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

Häufiger Anwendungsfall: Navigation zentrieren

html
<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">Über</a>
  <a href="#">Kontakt</a>
</nav>
css
.navbar {
  display: flex;
  justify-content: center;  /* Links zentrieren */
  gap: 20px;
  background-color: #333;
  padding: 20px;
}

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

4. space-between (HÄUFIG VERWENDET!) ​

Verhalten:

  • Erstes Element am Anfang, letztes am Ende
  • Gleicher Abstand zwischen den Elementen
  • Kein Abstand am äußeren Rand

CSS:

css
.container {
  display: flex;
  justify-content: space-between;
  border: 2px solid #333;
  padding: 10px;
  width: 500px;
}

Ergebnis (bei flex-direction: row):

┌────────────────────────────────────┐
│ [1]      [2]      [3]            │  ← Gleichmäßiger Abstand, keine äußeren Ränder
└────────────────────────────────────┘

Häufiger Anwendungsfall: Header mit Logo und Navigation

html
<header class="header">
  <div class="logo">Logo</div>
  <nav class="nav">
    <a href="#">Home</a>
    <a href="#">Über</a>
    <a href="#">Kontakt</a>
  </nav>
</header>
css
.header {
  display: flex;
  justify-content: space-between;  /* Logo links, Navigation rechts */
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: white;
}

.nav {
  display: flex;
  gap: 20px;
}

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

5. space-around ​

Verhalten:

  • Gleicher Abstand um jedes Element
  • Äußerer Rand ist halber Abstand im Vergleich zu den Abständen zwischen Elementen

CSS:

css
.container {
  display: flex;
  justify-content: space-around;
  border: 2px solid #333;
  padding: 10px;
  width: 500px;
}

Ergebnis (bei flex-direction: row):

┌────────────────────────────────────┐
│  [1]   [2]   [3]                │  ← Äußerer Rand halb so groß wie innere Abstände
└────────────────────────────────────┘

6. space-evenly ​

Verhalten:

  • Gleicher Abstand zwischen allen Elementen und am äußeren Rand

CSS:

css
.container {
  display: flex;
  justify-content: space-evenly;
  border: 2px solid #333;
  padding: 10px;
  width: 500px;
}

Ergebnis (bei flex-direction: row):

┌────────────────────────────────────┐
│  [1]   [2]   [3]                 │  ← Alle Abstände gleich (auch äußere Ränder)
└────────────────────────────────────┘

6.3 Praxisbeispiel: Verschiedene Ausrichtungsarten vergleichen ​

HTML-Struktur ​

html
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>justify-content Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>justify-content Demonstration</h1>
  
  <section class="demo">
    <h2>flex-start (Standard)</h2>
    <div class="container flex-start">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </section>

  <section class="demo">
    <h2>center</h2>
    <div class="container center">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </section>

  <section class="demo">
    <h2>space-between</h2>
    <div class="container space-between">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </section>

  <section class="demo">
    <h2>space-around</h2>
    <div class="container space-around">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </section>

  <section class="demo">
    <h2>space-evenly</h2>
    <div class="container space-evenly">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </section>

</body>
</html>

CSS ​

css
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.demo {
  margin-bottom: 40px;
}

h2 {
  margin-bottom: 10px;
  color: #333;
}

.container {
  display: flex;
  border: 2px solid #333;
  padding: 10px;
  width: 500px;  /* Feste Breite für besseren Vergleich */
}

.item {
  padding: 20px;
  background-color: lightblue;
  border: 2px solid blue;
  min-width: 60px;
  text-align: center;
}

/* Verschiedene justify-content Werte */
.flex-start {
  justify-content: flex-start;
}

.center {
  justify-content: center;
}

.space-between {
  justify-content: space-between;
}

.space-around {
  justify-content: space-around;
}

.space-evenly {
  justify-content: space-evenly;
}

Ergebnis im Browser ​

Öffne die HTML-Datei im Browser und beobachte:

  1. flex-start: Elemente links
  2. center: Elemente mittig
  3. space-between: Erstes/letztes am Rand, gleiche Abstände dazwischen
  4. space-around: Gleiche Abstände um Elemente, äußerer Rand halb so groß
  5. space-evenly: Alle Abstände gleich

6.4 Anfängerfehler: Änderung der Hauptachsen-Richtung ​

Problem: Wenn flex-direction geändert wird, ändert sich auch die Richtung, in der justify-content wirkt.

Szenario 1: flex-direction: row (Standard) ​

css
.container {
  display: flex;
  flex-direction: row;  /* Horizontal */
  justify-content: flex-end;  /* Rechtsbündig */
}

Ergebnis:

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

Szenario 2: flex-direction: column ​

css
.container {
  display: flex;
  flex-direction: column;  /* Vertikal */
  justify-content: flex-end;  /* Jetzt: Untenbündig! */
  height: 300px;  /* Höhe für Demonstration */
}

Ergebnis:

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

Wichtig:

Wenn flex-direction geändert wird, wirkt justify-content in die neue Richtung der Hauptachse!

Wie man es vermeidet ​

Tipp 1: Hauptachse immer im Kopf behalten

css
.container {
  display: flex;
  flex-direction: column;  /* Jetzt ist Hauptachse vertikal! */
  justify-content: center;  /* Zentriert jetzt vertikal */
}

Tipp 2: align-items für die andere Achse verwenden

css
.container {
  display: flex;
  flex-direction: column;  /* Hauptachse: vertikal */
  justify-content: center;  /* Zentriert vertikal */
  align-items: center;      /* Zentriert horizontal (Querachse) */
  height: 300px;
}

Ergebnis (perfekte Zentrierung):

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

Zusammenfassung ​

In diesem Kapitel hast du gelernt:

  • ✅ justify-content steuert Ausrichtung auf der Hauptachse
  • ✅ 6 häufige Werte: flex-start, flex-end, center, space-between, space-around, space-evenly
  • ✅ center und space-between sind besonders häufig verwendet
  • ✅ Wenn flex-direction geändert wird, ändert sich die Wirkungsrichtung

Nächstes Kapitel: In Kapitel 7 lernen wir align-items und align-content kennen (Ausrichtung auf der Querachse).

Übungsaufgaben ​

Aufgabe 6.1 ​

Erstelle einen Container mit 3 Elementen. Verwende justify-content: space-between. Ändere dann flex-direction auf column und beobachte die Änderung.

Aufgabe 6.2 ​

Erstelle eine Navigation mit Logo links und Links rechts. Verwende justify-content: space-between.

Aufgabe 6.3 ​

Erstelle 3 Container mit jeweils anderem justify-content Wert. Vergleiche die Unterschiede visuell.

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials