Kapitel 15: Häufige Interviewfragen zu Flexbox

15.1 Grundlegende Konzeptfragen

Frage 1: Was ist ein Flex-Container und was sind Flex-Elemente?

Antwort:

• Flex-Container: Das übergeordnete Element, das display: flex oder display: inline-flex zugewiesen bekommt.
• Flex-Elemente: Die direkten Kindelemente eines Flex-Containers. Sie werden automatisch entlang der Hauptachse angeordnet.

Beispiel:

<div class="container">  <!-- Flex-Container -->
  <div class="item">1</div>  <!-- Flex-Element -->
  <div class="item">2</div>  <!-- Flex-Element -->
</div>

.container {
  display: flex;  /* JETZT ist .container ein Flex-Container */
}

---

Frage 2: Was ist die Hauptachse (Main Axis) und die Querachse (Cross Axis)?

Antwort:

• Hauptachse (Main Axis): Die Achse, entlang der Flex-Elemente angeordnet werden. Die Richtung wird durch flex-direction festgelegt.
• Querachse (Cross Axis): Steht senkrecht zur Hauptachse.

Beispiel:

.container {
  display: flex;
  flex-direction: row;  /* Hauptachse: horizontal */
  /* Querachse: vertikal */
}

/* Wenn flex-direction: column → Hauptachse: vertikal, Querachse: horizontal */

---

Frage 3: Was ist der Unterschied zwischen justify-content und align-items?

Antwort:

• justify-content: Steuert die Ausrichtung von Flex-Elementen auf der Hauptachse.
• align-items: Steuert die Ausrichtung von Flex-Elementen auf der Querachse.

Beispiel (bei flex-direction: row):

.container {
  display: flex;
  flex-direction: row;  /* Hauptachse: horizontal */
  justify-content: center;  /* Horizontal zentrieren */
  align-items: center;      /* Vertikal zentrieren */
}

---

15.2 Kern-Eigenschaftsfragen

Frage 4: Was ist der Unterschied zwischen flex-grow, flex-shrink und flex-basis?

Antwort:

• flex-grow: Bestimmt, wie viel überschüssigen Platz ein Element einnehmen darf (Vergrößerungsfaktor).
• flex-shrink: Bestimmt, wie stark ein Element schrumpfen darf, wenn der Platz nicht ausreicht (Verkleinerungsfaktor).
• flex-basis: Bestimmt die Ausgangsgröße eines Elements auf der Hauptachse, bevor überschüssiger Platz verteilt wird.

Beispiel:

.item {
  flex-grow: 1;    /* Kann wachsen */
  flex-shrink: 1;  /* Kann schrumpfen */
  flex-basis: 200px; /* Startet bei 200px */
}

/* Kurzschreibweise: */
.item {
  flex: 1 1 200px;
}

---

Frage 5: Was ist flex: 1?

Antwort:flex: 1 ist eine Kurzschreibweise für:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

Bedeutung:

• Element darf wachsen (flex-grow: 1)
• Element darf schrumpfen (flex-shrink: 1)
• Element startet bei 0% (flex-basis: 0%) → Alle Elemente sind gleich breit!

Beispiel:

.container {
  display: flex;
}

.item {
  flex: 1;  /* Alle Elemente gleich breit */
}

---

Frage 6: Was ist der Unterschied zwischen align-items und align-content?

Antwort:

• align-items: Steuert die Ausrichtung einzelner Flex-Elemente auf der Querachse. Wirkt immer (ein- oder mehrzeilig).
• align-content: Steuert die Ausrichtung von Zeilen auf der Querachse. Wirkt nur bei mehrzeiligen Containern (flex-wrap: wrap).

Beispiel:

.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;
}

---

15.3 Praxisszenario-Fragen

Frage 7: Wie zentriert man ein Element horizontal und vertikal?

Antwort: Verwende justify-content: center (für Hauptachse) und align-items: center (für Querachse).

Beispiel:

.container {
  display: flex;
  justify-content: center;  /* Horizontal zentrieren */
  align-items: center;      /* Vertikal zentrieren */
  height: 300px;          /* Wichtig: Höhe muss gesetzt sein! */
}

Alternative mit margin: auto:

.container {
  display: flex;
}

.item {
  margin: auto;  /* Perfekte Zentrierung! */
}

---

Frage 8: Wie erstellt man eine Navigation mit Logo links und Links rechts?

Antwort: Verwende justify-content: space-between.

Beispiel:

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

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

Alternative mit margin-left: auto:

.logo {
  /* Logo bleibt links */
}

.nav-links {
  margin-left: auto;  /* Nach rechts schieben */
}

---

Frage 9: Wie erstellt man ein Karten-Layout, das auf Mobile umbricht?

Antwort: Verwende flex-wrap: wrap und flex-basis (oder flex).

Beispiel:

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

.card {
  flex: 1 0 300px;  /* Mindestens 300px breit, dann gleichmäßig verteilen */
}

Ergebnis:

• Wenn genug Platz: Karten nebeneinander
• Wenn nicht genug Platz: Karten umbrechen

---

15.4 Fehlerbehebungs-Fragen

Frage 10: Warum wirkt align-content nicht?

Antwort:align-content wirkt nur wenn flex-wrap: wrap oder wrap-reverse gesetzt ist!

Lösung:

.container {
  display: flex;
  flex-wrap: wrap;     /* JETZT wirkt align-content! */
  align-content: center;
  height: 400px;
}

---

Frage 11: Warum wird width ignoriert?

Antwort: Wenn flex-basis gesetzt ist, ignoriert das Flex-Element width (bei flex-direction: row) oder height (bei flex-direction: column).

Lösung:

.item {
  /* width: 500px; → Weglassen! */
  flex-basis: 500px;  /* JETZT wird dieser Wert verwendet */
}

Oder:

.item {
  width: 500px;
  flex: none;  /* Verhindert, dass flex-basis width überschreibt */
}

---

Frage 12: Wie verhindert man, dass Flex-Elemente schrumpfen?

Antwort: Setze flex-shrink: 0.

Beispiel:

.item {
  flex-shrink: 0;  /* NICHT schrumpfen! */
  width: 200px;    /* Behält 200px bei */
}

---

15.5 Interview-Tipps

Tipp 1: Wichtigste Eigenschaften auswendig lernen

Must-Know:

• display: flex
• flex-direction
• justify-content
• align-items
• flex-wrap
• flex-grow, flex-shrink, flex-basis (und flex)
• order
• align-self

Tipp 2: Praxisbeispiele üben

Übe diese Szenarien:

• ✅ Horizontale Zentrierung
• ✅ Vertikale Zentrierung
• ✅ Navigation mit Logo links, Links rechts
• ✅ Karten-Layout mit Umbruch
• ✅ Drei-spaltiges Layout (Sidebar + Content + Ads)

Tipp 3: Unterschiede erklären können

Wichtig:

• justify-content vs. align-items
• align-items vs. align-content
• flex-grow vs. flex-shrink
• flex-basis vs. width/height

---

Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Grundlegende Konzeptfragen (Container, Elemente, Hauptachse, Querachse)
• ✅ Kern-Eigenschaftsfragen (flex-grow, flex-shrink, flex-basis, etc.)
• ✅ Praxisszenario-Fragen (Zentrierung, Navigation, Karten-Layout)
• ✅ Fehlerbehebungs-Fragen (align-content wirkt nicht, width wird ignoriert)
• ✅ Interview-Tipps

Nächstes Kapitel: In Kapitel 16 lernen wir Erweiterungsmöglichkeiten kennen (Flexbox vs. Grid, komplexe Layouts).

---

Übungsaufgaben

Aufgabe 15.1

Erkläre einem Freund (oder dir selbst), was ein Flex-Container und Flex-Elemente sind. Verwende einfache Beispiele.

Aufgabe 15.2

Erstelle eine Liste der 10 wichtigsten Flexbox-Eigenschaften und schreibe deren Bedeutung auf.

Aufgabe 15.3

Übe das Zentrieren von Elementen (horizontal + vertikal) mit justify-content und align-items.

Aufgabe 15.4

Übe das Erstellen einer Navigation mit Logo links und Links rechts. Verwende justify-content: space-between.