Anhang: Flexbox Kernwissen auf einen Blick

1. Kernbegriffe im Überblick

Begriff	Definition	Wichtig für
Flex-Container	Element mit `display: flex` oder `display: inline-flex`	Grundlage von allem!
Flex-Element	Direktes Kindelement eines Flex-Containers	Werden automatisch ausgerichtet
Hauptachse (Main Axis)	Achse, entlang der Flex-Elemente angeordnet werden	Bestimmt durch `flex-direction`
Querachse (Cross Axis)	Steht senkrecht zur Hauptachse	Wichtig für `align-items`
Main Start / Main End	Anfang und Ende der Hauptachse	Verständnis der Richtung
Cross Start / Cross End	Anfang und Ende der Querachse	Verständnis der Ausrichtung

2. Container-Eigenschaften (Nach Häufigkeit sortiert, mit Standardwerten)

`display`

Werte: flex | inline-flex
Standard: inline (wenn nicht gesetzt)
Bedeutung: Aktiviert Flexbox

`justify-content`

Werte: flex-start | flex-end | center | space-between | space-around | space-evenly
Standard: flex-start
Bedeutung: Ausrichtung auf der Hauptachse

`align-items`

Werte: stretch | flex-start | flex-end | center | baseline
Standard: stretch
Bedeutung: Ausrichtung auf der Querachse (einzelne Elemente)

`flex-direction`

Werte: row | row-reverse | column | column-reverse
Standard: row
Bedeutung: Richtung der Hauptachse

`flex-wrap`

Werte: nowrap | wrap | wrap-reverse
Standard: nowrap
Bedeutung: Umbruch erlauben

`align-content`

Werte: stretch | flex-start | flex-end | center | space-between | space-around
Standard: stretch
Bedeutung: Ausrichtung von Zeilen (nur bei Umbruch!)
Wichtig: Wirkt nur wenn flex-wrap: wrap gesetzt ist!

`gap`

Werte: <length> (z.B. 20px)
Standard: 0
Bedeutung: Abstand zwischen Flex-Elementen

`row-gap`

Werte: <length>
Standard: 0
Bedeutung: Vertikaler Abstand zwischen Zeilen (bei Umbruch)

`column-gap`

Werte: <length>
Standard: 0
Bedeutung: Horizontaler Abstand zwischen Elementen in einer Zeile

`flex-flow`

Werte: <flex-direction> <flex-wrap>
Standard: row nowrap
Bedeutung: Kurzschreibweise für flex-direction + flex-wrap

3. Element-Eigenschaften (Nach Häufigkeit sortiert, mit Standardwerten)

`flex`

Werte: <flex-grow> <flex-shrink> <flex-basis>
Standard: 0 1 auto
Bedeutung: Kurzschreibweise für flex-grow, flex-shrink, flex-basis
Häufig verwendet: flex: 1 (gleichmäßige Verteilung)

`flex-grow`

Werte: <non-negative zahl> (z.B. 0, 1, 2)
Standard: 0
Bedeutung: Vergrößerungsfaktor (überschüssigen Platz aufteilen)

`flex-shrink`

Werte: <non-negative zahl>
Standard: 1
Bedeutung: Verkleinerungsfaktor (Schrumpfung bei Überlauf)

`flex-basis`

Werte: <length> | auto
Standard: auto
Bedeutung: Ausgangsgröße auf der Hauptachse

`order`

Werte: <ganzzahl>
Standard: 0
Bedeutung: Reihenfolge der Elemente ändern (niedriger = früher)

`align-self`

Werte: auto | flex-start | flex-end | center | baseline | stretch
Standard: auto (übernimmt align-items vom Container)
Bedeutung: Einzelnes Element anders ausrichten (überschreibt align-items)

4. Häufige Layout-Code-Vorlagen (Kopieren & Einfügen)

Vorlage 1: Horizontale Zentrierung

css

.container {
  display: flex;
  justify-content: center;
}

Vorlage 2: Vertikale Zentrierung

css

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

Vorlage 3: Perfekte Zentrierung (Horizontal + Vertikal)

css

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

css

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: white;
}

Vorlage 5: Elemente gleichmäßig verteilen

css

.container {
  display: flex;
  justify-content: space-between;  /* Oder space-around, space-evenly */
}

Vorlage 6: Ein Element nach rechts schieben

css

.push-right {
  margin-left: auto;
}

Vorlage 7: Karten-Layout (responsiv, mit Umbruch)

css

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

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

css

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;  /* Hauptinhalt nimmt restlichen Platz ein */
}

Vorlage 9: Drei-spaltiges Layout (Sidebar + Content + Ads)

css

.layout {
  display: flex;
}

.sidebar {
  flex: 0 0 200px;  /* Fix 200px */
}

.content {
  flex: 1;           /* Restlichen Platz einnehmen */
}

.ads {
  flex: 0 0 150px;  /* Fix 150px */
}

Vorlage 10: Responsives Layout (Mobile-First)

css

/* Standard (Mobile): Untereinander */
.container {
  display: flex;
  flex-direction: column;
}

/* Tablet und größer: Nebeneinander */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

5. Häufige Fehler-Schnellübersicht

Fehler	Symptom	Ursache	Lösung
Flexbox wirkt nicht	Elemente verhalten sich wie normale Block-Elemente	`display: flex` vergessen oder Tippfehler	`display: flex` setzen (richtig schreiben!)
Ausrichtung wirkt nicht	`justify-content` oder `align-items` haben keine Wirkung	`flex-direction` geändert → Hauptachse ist jetzt vertikal/horizontal	`justify-content` wirkt jetzt auf die neue Richtung der Hauptachse!
`align-content` wirkt nicht	Zeilen werden nicht ausgerichtet	`flex-wrap: wrap` vergessen	`flex-wrap: wrap` setzen!
Elemente überlaufen Container	Layout bricht	`flex-shrink: 0` gesetzt (dürfen nicht schrumpfen)	`flex-shrink: 1` setzen oder `min-width: 0` hinzufügen
`width` wird ignoriert	Breite ändert sich nicht	`flex-basis` ist gesetzt (hat Vorrang)	`flex-basis` verwenden (oder `width` weglassen)
Höhenunterschiede bei Elementen	Elemente sind unterschiedlich hoch	`align-items: stretch` (Standard) streckt alle auf gleiche Höhe	`align-items: flex-start` setzen (wenn gewünscht)

6. Browser-Kompatibilität (Kurzfassung)

Browser	Unterstützt ab Version	Bemerkung
Chrome	29+ (August 2013)	Voll unterstützt
Firefox	28+ (März 2014)	Voll unterstützt
Safari	9+ (Oktober 2015)	Voll unterstützt (ältere Versionen brauchen `-webkit-` Präfix)
Edge	12+ (Juli 2015)	Voll unterstützt
Opera	17+ (Oktober 2013)	Voll unterstützt
IE	10+ (mit `-ms-` Präfix)	Teilweise unterstützt (IE10/11)
IE9 und älter	❌ Nicht unterstützt	Fallback mit Float oder Inline-Block nötig

Empfehlung:

Heutzutage ist Flexbox sicher zu verwenden, da die meisten Nutzer moderne Browser verwenden. Nur wenn du IE9 oder älter unterstützen musst, ist ein Fallback notwendig.

7. Häufige Interviewfragen (Kurzantworten)

Frage 1: Was ist der Unterschied zwischen Flexbox und Grid?

Flexbox: 1-dimensional (entweder Zeile ODER Spalte)
Grid: 2-dimensional (Zeilen UND Spalten gleichzeitig)

Frage 2: Was ist `justify-content`?

Ausrichtung von Flex-Elementen auf der Hauptachse.

Frage 3: Was ist `align-items`?

Ausrichtung von Flex-Elementen auf der Querachse.

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

align-items: Ausrichtung einzelner Elemente (immer)
align-content: Ausrichtung von Zeilen (nur bei Umbruch!)

Frage 5: Was macht `flex: 1`?

Kurzschreibweise für flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Alle Elemente wachsen gleichmäßig.

Frage 6: Wie zentriert man ein Element perfekt (horizontal + vertikal)?

css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

css

.navbar {
  display: flex;
  justify-content: space-between;
}

Frage 8: Warum wird `width` manchmal ignoriert?

Weil flex-basis gesetzt ist (hat Vorrang vor width bei flex-direction: row).

8. Nützliche Ressourcen (Kurzfassung)

Ressource	Link	Art
MDN Flexbox	https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout	Dokumentation (Deutsch)
CSS Tricks: A Complete Guide to Flexbox	https://css-tricks.com/snippets/css/a-guide-to-flexbox/	Nachschlagewerk (Englisch)
Flexbox Froggy	https://flexboxfroggy.com/#de	Spielerisch lernen (Deutsch)
Flexbox Defense	http://www.flexboxdefense.com/	Spielerisch lernen (Englisch)
Kevin Powell (YouTube)	https://www.youtube.com/kevinpowell	Videos (Englisch)
Codepen	https://codepen.io/	Code-Beispiele

9. Lernschritte (Empfohlene Reihenfolge)

✅ Kapitel 1-2: Grundlagen, Entwicklungsumgebung
✅ Kapitel 3-4: Kernbegriffe, Flexbox aktivieren
✅ Kapitel 5-7: Container-Eigenschaften (flex-direction, justify-content, align-items)
✅ Kapitel 8-10: Element-Eigenschaften (order, align-self, flex-grow, flex-shrink, flex-basis, gap)
✅ Kapitel 11-12: Praxisbeispiele (Zentrierung, Navigation, Karten-Layout, responsives Design)
✅ Kapitel 13-15: Fehlerbehebung, fortgeschrittene Tipps, Interviewfragen
✅ Kapitel 16-17: Erweiterung (Grid, Frameworks, Ressourcen)

10. Checkliste: Hast du alles verstanden?

[ ] Ich weiß, was ein Flex-Container und ein Flex-Element ist
[ ] Ich verstehe den Unterschied zwischen Hauptachse und Querachse
[ ] Ich kann justify-content und align-items korrekt verwenden
[ ] Ich weiß, was flex-grow, flex-shrink und flex-basis machen
[ ] Ich kann flex: 1 und flex: none korrekt einsetzen
[ ] Ich kann ein Element perfekt zentrieren (horizontal + vertikal)
[ ] Ich kann eine Navigation mit Logo links und Links rechts erstellen
[ ] Ich kann ein Karten-Layout mit Umbruch erstellen
[ ] Ich kann häufige Fehler beheben (align-content wirkt nicht, width wird ignoriert)
[ ] Ich kenne nützliche Ressourcen (MDN, Flexbox Froggy, CSS Tricks)

Wenn alle Punkte abgehakt sind: Herzlichen Glückwunsch! Du hast Flexbox gemeistert! 🎉

Abschlusswort

Flexbox ist ein mächtiges Werkzeug für moderne Webentwicklung.

Mit dem Wissen aus diesem Kurs bist du in der Lage, die meisten Layout-Probleme schnell und effizient zu lösen. Übe weiterhin mit echten Projekten und schau dir Code von anderen an, um deine Fähigkeiten zu verbessern.

Viel Erfolg bei deiner Reise als Frontend-Entwickler! 🚀

Anhang: Flexbox Kernwissen auf einen Blick ​

1. Kernbegriffe im Überblick ​

2. Container-Eigenschaften (Nach Häufigkeit sortiert, mit Standardwerten) ​

display ​

justify-content ​

align-items ​

flex-direction ​

flex-wrap ​

align-content ​

gap ​

row-gap ​

column-gap ​

flex-flow ​

3. Element-Eigenschaften (Nach Häufigkeit sortiert, mit Standardwerten) ​

flex ​

flex-grow ​

flex-shrink ​

flex-basis ​

order ​

align-self ​

4. Häufige Layout-Code-Vorlagen (Kopieren & Einfügen) ​

Vorlage 1: Horizontale Zentrierung ​

Vorlage 2: Vertikale Zentrierung ​

Vorlage 3: Perfekte Zentrierung (Horizontal + Vertikal) ​

Vorlage 4: Navigation mit Logo links, Links rechts ​

Vorlage 5: Elemente gleichmäßig verteilen ​

Vorlage 6: Ein Element nach rechts schieben ​

Vorlage 7: Karten-Layout (responsiv, mit Umbruch) ​

Vorlage 8: Sticky Footer (Footer immer unten) ​

Vorlage 9: Drei-spaltiges Layout (Sidebar + Content + Ads) ​

Vorlage 10: Responsives Layout (Mobile-First) ​

5. Häufige Fehler-Schnellübersicht ​

6. Browser-Kompatibilität (Kurzfassung) ​

7. Häufige Interviewfragen (Kurzantworten) ​

Frage 1: Was ist der Unterschied zwischen Flexbox und Grid? ​

Frage 2: Was ist justify-content? ​

Frage 3: Was ist align-items? ​

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

Frage 5: Was macht flex: 1? ​

Frage 6: Wie zentriert man ein Element perfekt (horizontal + vertikal)? ​

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

Frage 8: Warum wird width manchmal ignoriert? ​

8. Nützliche Ressourcen (Kurzfassung) ​

9. Lernschritte (Empfohlene Reihenfolge) ​

10. Checkliste: Hast du alles verstanden? ​

Abschlusswort ​