BananaMaster

7 Flexbox und wie display: flex, justify-content, align-items funktionieren - ( HTML und CSS, Front End )

Falls du etwas vergessen hast — klicke, um zur Lektion zurückzukehren.

📘 Praktische Aufgaben: Flexbox

Erstelle für jede Aufgabe eigene Klassen in der Datei style.css und wende sie auf die passenden Tags an.

📌 Dateistruktur: index.html + style.css

💡 Hauptregel: display: flex wird immer auf das Elternelement geschrieben, nicht auf das Kindelement.

✏️ Aufgabe 1 — flex-direction: row (Standard)

Drei Blöcke stehen in einer Reihe. Schätze die Größe des Elternelements mit dem Auge:

• Elternelement — Hintergrund: red, Maße in px, füge display: flex hinzu
• Kind 1 — Hintergrund: #e74c3c, Maße in %
• Kind 2 — Hintergrund: #3498db, Maße in %
• Kind 3 — Hintergrund: #2ecc71, Maße in %
• Kind 4 — Hintergrund: #2c3e50, Maße in %
• 💡 flex-direction: row ist der Standardwert — muss nicht geschrieben werden

✏️ Aufgabe 2

Drei Blöcke stehen in einer Spalte. Schätze die Größe des Elternelements mit dem Auge:

• Elternelement — Hintergrund: #8e44ad, Maße in px
• Kind 1 — Hintergrund: #f39c12, Maße in %
• Kind 2 — Hintergrund: #e74c3c, Maße in %
• Kind 3 — Hintergrund: #1abc9c, Maße in %

✏️ Aufgabe 3

Der Block ist horizontal zur Mitte ausgerichtet. Schätze die Größen mit dem Auge:

• Elternelement — Hintergrund: #2d3436, Maße in px
• Kind — Hintergrund: #fdcb6e, Maße in %

✏️ Aufgabe 4

Der Block ist am rechten Rand ausgerichtet. Schätze die Größen mit dem Auge:

• Elternelement — Hintergrund: #00b894, Maße in px
• Kind — Hintergrund: #d63031, Maße in %

✏️ Aufgabe 5

Der Block ist vertikal zentriert ausgerichtet. Schätze die Größen mit dem Auge:

• Elternelement — Hintergrund: #6c5ce7, Maße in px
• Kind — Hintergrund: #fd79a8, Maße in %

✏️ Aufgabe 6

Der Block ist am unteren Rand ausgerichtet. Schätze die Größen mit dem Auge:

• Elternelement — Hintergrund: #0984e3, Maße in px
• Kind — Hintergrund: #ffeaa7, Maße in %

✏️ Aufgabe 7

Der Block ist genau in der Mitte horizontal und vertikal platziert. Schätze die Größen mit dem Auge:

• Elternelement — Hintergrund: #e17055, Maße in px
• Kind — Hintergrund: #74b9ff, Maße in %

✏️ Aufgabe 8

Drei Blöcke — die äußeren liegen an den Rändern an, der mittlere dazwischen. Vertikal sind alle zentriert. Schätze die Größen mit dem Auge:

• Elternelement — Hintergrund: #2c3e50, Maße in px
• Kind 1 — Hintergrund: #e74c3c, Maße in %
• Kind 2 — Hintergrund: #f1c40f, Maße in %
• Kind 3 — Hintergrund: #2ecc71, Maße in %

✏️ Aufgabe 9

Eine Spalte aus zwei Blöcken ist an der unteren rechten Ecke ausgerichtet. Schätze die Größen mit dem Auge:

• Elternelement — Hintergrund: #6c5ce7, Maße in px
• Kind 1 — Hintergrund: #fd79a8, Maße in %
• Kind 2 — Hintergrund: #00cec9, Maße in %

✏️ Aufgabe 10

Zwei Flex-Container sind ineinander verschachtelt. Schätze die Größen mit dem Auge:

• Äußeres Elternelement — Hintergrund: #dfe6e9, Maße in px, display: flex, justify-content: space-between
• Linker Block — Hintergrund: #b2bec3, Breite in %, selbst ein Flex-Container: justify-content: space-between
• Links → Kind 1 — Hintergrund: #e74c3c, Maße in %
• Links → Kind 2 — Hintergrund: #3498db, Maße in %
• Rechter Block — Hintergrund: #2d3436, Breite in %, selbst ein Flex-Container: justify-content: center, align-items: center
• Rechts → Kind — Hintergrund: #fdcb6e, Maße in %

📌 Wichtig:
Jede Klasse wird separat in style.css geschrieben.
Verwende nur HTML und CSS.
Übe die Eigenschaften: display: flex, justify-content, align-items.