Kapitel 11: Grundlegende Praxisbeispiele

Praxis 1: Horizontale Zentrierung (Häufiges Szenario)

Ziel

Ein einzelnes Element horizontal im Container zentrieren.

Methode 1: justify-content: center

HTML:

<div class="container">
  <div class="box">Ich bin zentriert!</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: center;  /* Horizontal zentrieren */
  border: 2px solid #333;
  padding: 20px;
  height: 200px;
}

.box {
  background-color: lightblue;
  padding: 20px;
}

Ergebnis:

┌────────────────────────────────────┐
│      [Ich bin zentriert!]         │
└────────────────────────────────────┘

Methode 2: margin: 0 auto (Alternative)

CSS:

.container {
  display: flex;
  border: 2px solid #333;
  padding: 20px;
  height: 200px;
}

.box {
  margin: 0 auto;  /* Auch möglich, aber weniger Flex-like */
  background-color: lightblue;
  padding: 20px;
}

Empfehlung:

Verwende justify-content: center für Flexbox-Layouts, da es semantischer und flexibler ist.

---

Mehrere Elemente horizontal zentrieren und gleichmäßig verteilen

HTML:

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

CSS (zentriert):

.container {
  display: flex;
  justify-content: center;  /* Alle zentriert */
  gap: 20px;  /* Abstand zwischen Elementen */
  border: 2px solid #333;
  padding: 20px;
}

.box {
  padding: 20px;
  background-color: lightblue;
}

Ergebnis:

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

CSS (gleichmäßig verteilt):

.container {
  display: flex;
  justify-content: space-between;  /* Gleichmäßig verteilt */
  border: 2px solid #333;
  padding: 20px;
}

.box {
  padding: 20px;
  background-color: lightblue;
}

Ergebnis:

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

---

Praxis 2: Vertikale Zentrierung (Häufiges Szenario)

Ziel

Ein Element vertikal innerhalb eines Containers zentrieren.

Methode: align-items: center

HTML:

<div class="container">
  <div class="box">Ich bin vertikal zentriert!</div>
</div>

CSS:

.container {
  display: flex;
  align-items: center;  /* Vertikal zentrieren */
  border: 2px solid #333;
  padding: 20px;
  height: 200px;  /* Wichtig: Container braucht Höhe! */
}

.box {
  background-color: lightblue;
  padding: 20px;
}

Ergebnis:

┌────────────────────────────────────┐
│                                    │
│  [Ich bin vertikal zentriert!]    │
│                                    │
└────────────────────────────────────┘

---

Perfekte Zentrierung (Horizontal + Vertikal)

CSS:

.container {
  display: flex;
  justify-content: center;  /* Horizontal zentrieren */
  align-items: center;      /* Vertikal zentrieren */
  border: 2px solid #333;
  height: 200px;
}

Ergebnis:

┌────────────────────────────────────┐
│                                    │
│      [Ich bin perfekt zentriert!]  │
│                                    │
└────────────────────────────────────┘

Häufiger Anwendungsfall: Hero-Sektion

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  /* Volle Bildschirmhöhe */
  background-color: #f0f0f0;
}

.hero-content {
  text-align: center;
}

---

Praxis 3: Navigationsleiste (Häufig im Unternehmen)

Ziel

Eine typische Navigationsleiste mit Logo links und Links rechts erstellen.

HTML:

<nav class="navbar">
  <div class="logo">Meine Webseite</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>

CSS:

.navbar {
  display: flex;
  justify-content: space-between;  /* Logo links, Links rechts */
  align-items: center;              /* Vertikal zentrieren */
  padding: 20px;
  background-color: #333;
  color: white;
}

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

.nav-links {
  display: flex;      /* Flexbox für die Liste */
  gap: 20px;         /* Abstand zwischen Links */
  list-style: none;   /* Aufzählungszeichen entfernen */
  margin: 0;
  padding: 0;
}

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

.nav-links a:hover {
  text-decoration: underline;
}

Ergebnis:

┌────────────────────────────────────┐
│ Meine Webseite     Home Über uns Kontakt │
└────────────────────────────────────┘

Responsive Anpassung (Mobile)

CSS (Mobile-Version):

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;  /* Untereinander auf Mobile */
    gap: 10px;
  }
  
  .nav-links {
    flex-direction: column;  /* Auch Links untereinander */
    align-items: center;
  }
}

Ergebnis (Mobile):

┌────────────────────────────────────┐
│        Meine Webseite             │
│                                  │
│          Home                     │
│        Über uns                  │
│        Kontakt                   │
└────────────────────────────────────┘

---

Praxis 4: Karten-Layout (E-Commerce/Blog häufig)

Ziel

Ein responsives Karten-Layout erstellen, das auf Mobile-Geräten umbricht.

HTML:

<div class="card-container">
  <div class="card">
    <h3>Karte 1</h3>
    <p>Dies ist der Inhalt der ersten Karte.</p>
  </div>
  <div class="card">
    <h3>Karte 2</h3>
    <p>Dies ist der Inhalt der zweiten Karte.</p>
  </div>
  <div class="card">
    <h3>Karte 3</h3>
    <p>Dies ist der Inhalt der dritten Karte.</p>
  </div>
</div>

CSS:

.card-container {
  display: flex;
  flex-wrap: wrap;      /* Umbruch erlauben */
  gap: 20px;           /* Abstand zwischen Karten */
  padding: 20px;
}

.card {
  flex: 1 0 300px;    /* Mindestens 300px breit, dann gleichmäßig */
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card h3 {
  margin-top: 0;
}

Ergebnis (Desktop):

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

Ergebnis (Mobile - automatischer Umbruch):

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

Karten-Inhalt zentrieren

Zusätzliches CSS:

.card {
  /* Bereits vorhanden: */
  flex: 1 0 300px;
  padding: 20px;
  background-color: #f0f0f0;
  border-radius: 8px;
  
  /* NEU: Inhalt zentrieren */
  display: flex;
  flex-direction: column;
  align-items: center;      /* Horizontal zentrieren */
  text-align: center;       /* Text zentrieren */
}

---

Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Horizontale Zentrierung (justify-content: center)
• ✅ Vertikale Zentrierung (align-items: center)
• ✅ Perfekte Zentrierung (beide kombiniert)
• ✅ Navigationsleiste erstellen (space-between)
• ✅ Karten-Layout mit Umbruch (flex-wrap: wrap)

Nächstes Kapitel: In Kapitel 12 lernen wir fortgeschrittene Praxisbeispiele: Login-Seite, responsives Layout.

---

Übungsaufgaben

Aufgabe 11.1

Erstelle eine Box, die perfekt im Browserfenster zentriert ist (horizontal und vertikal).

Aufgabe 11.2

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

Aufgabe 11.3

Erstelle ein Karten-Layout mit 3 Karten. Auf Mobile-Geräten sollen die Karten untereinander stehen.

Aufgabe 11.4

Erstelle eine Navigationsleiste, die auf Desktop horizontal und auf Mobile vertikal ist. Verwende eine Media Query.