Michael Czechowski
8e892254f8
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
- Changed solution in 00-welcome.json from "Hallo Welt" to "Hello World" - Added missing solution fields to 01-box-model.json (8 lessons) - Added missing solution fields to 05-units-variables.json (4 lessons) - Added missing solution fields to 06-transitions-animations.json (4 lessons) - Added missing solution fields to 08-responsive.json (4 lessons) - Fixed flexbox.json class names from .green/.red/.yellow to .box1/.box2/.box3 - Added missing solution fields to flexbox.json (6 lessons) German translations now keep all CSS code in English for maintainability, with only instructional text translated.
145 lines
8.0 KiB
JSON
145 lines
8.0 KiB
JSON
{
|
|
"$schema": "../../schemas/code-crispies-module-schema.json",
|
|
"id": "flexbox",
|
|
"title": "CSS Flexbox",
|
|
"description": "Beherrsche das flexible Box-Layout-Modell für moderne responsive Designs",
|
|
"difficulty": "intermediate",
|
|
"lessons": [
|
|
{
|
|
"id": "flexbox-1",
|
|
"title": "Flex Container",
|
|
"description": "Flexbox ist ein eindimensionales Layout-System. Mit <kbd>display: flex</kbd> wird ein Element zum Flex-Container. Alle direkten Kinder werden automatisch zu Flex-Items und richten sich horizontal (Hauptachse) aus. Die Querachse verläuft senkrecht dazu.",
|
|
"task": "Füge <kbd>display: flex</kbd> zu <kbd>.wrap</kbd> hinzu.",
|
|
"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; }",
|
|
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; }",
|
|
"codePrefix": ".wrap {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "display: flex;",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "display", "expected": "flex" },
|
|
"message": "Setze <kbd>display: flex</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-2",
|
|
"title": "Direction & Wrap",
|
|
"description": "<kbd>flex-direction</kbd> bestimmt die Hauptachse: <kbd>row</kbd> (horizontal, Standard) oder <kbd>column</kbd> (vertikal). Mit <kbd>flex-wrap: wrap</kbd> brechen Items in die nächste Zeile/Spalte um, wenn der Platz nicht reicht.",
|
|
"task": "Füge <kbd>flex-direction: column</kbd> und <kbd>flex-wrap: wrap</kbd> zu <kbd>.wrap</kbd> hinzu.",
|
|
"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div><div class='box'>4</div><div class='box'>5</div></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
|
|
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; height: 16rem; display: flex; }",
|
|
"codePrefix": ".wrap {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "flex-direction: column;\n flex-wrap: wrap;",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "flex-direction", "expected": "column" },
|
|
"message": "Setze <kbd>flex-direction: column</kbd>",
|
|
"options": { "exact": true }
|
|
},
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "flex-wrap", "expected": "wrap" },
|
|
"message": "Setze <kbd>flex-wrap: wrap</kbd>",
|
|
"options": { "exact": true }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-3",
|
|
"title": "Justify Content",
|
|
"description": "<kbd>justify-content</kbd> verteilt Items entlang der Hauptachse. Werte: <kbd>flex-start</kbd> (Anfang), <kbd>flex-end</kbd> (Ende), <kbd>center</kbd> (Mitte), <kbd>space-between</kbd> (gleichmäßig mit Abstand), <kbd>space-around</kbd> (gleichmäßig mit Rand).",
|
|
"task": "Füge <kbd>justify-content: space-between</kbd> zu <kbd>.wrap</kbd> hinzu.",
|
|
"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box'>2</div><div class='box'>3</div></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; }",
|
|
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
|
|
"codePrefix": ".wrap {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "justify-content: space-between;",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "justify-content", "expected": "space-between" },
|
|
"message": "Setze <kbd>justify-content: space-between</kbd>",
|
|
"options": { "exact": true }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-4",
|
|
"title": "Align Items",
|
|
"description": "<kbd>align-items</kbd> richtet Items entlang der Querachse aus (bei <kbd>row</kbd>: vertikal). Werte: <kbd>stretch</kbd> (Standard, füllt Höhe), <kbd>flex-start</kbd> (oben), <kbd>flex-end</kbd> (unten), <kbd>center</kbd> (Mitte), <kbd>baseline</kbd> (Textlinie).",
|
|
"task": "Füge <kbd>align-items: center</kbd> zu <kbd>.wrap</kbd> hinzu.",
|
|
"previewHTML": "<div class='wrap'><div class='box tall'>1</div><div class='box'>2</div><div class='box short'>3</div></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; display: flex; justify-content: center; } .tall { height: 6rem; } .short { height: 3rem; }",
|
|
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 10rem; }",
|
|
"codePrefix": ".wrap {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "align-items: center;",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "align-items", "expected": "center" },
|
|
"message": "Setze <kbd>align-items: center</kbd>",
|
|
"options": { "exact": true }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-5",
|
|
"title": "Flex Grow",
|
|
"description": "Die <kbd>flex</kbd>-Eigenschaft ist eine Kurzform für <kbd>flex-grow</kbd>, <kbd>flex-shrink</kbd> und <kbd>flex-basis</kbd>. Ein höherer Wert bedeutet, dass das Element mehr vom verfügbaren Platz einnimmt. <kbd>flex: 2</kbd> wächst doppelt so schnell wie <kbd>flex: 1</kbd>.",
|
|
"task": "Füge <kbd>flex: 2</kbd> zu <kbd>.box2</kbd> hinzu.",
|
|
"previewHTML": "<div class='wrap'><div class='box box1'>1</div><div class='box box2'>2</div><div class='box box3'>3</div></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; display: flex; align-items: center; justify-content: center; } .box1 { background: coral; flex: 1; } .box2 { background: mediumseagreen; } .box3 { background: gold; flex: 1; }",
|
|
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; }",
|
|
"codePrefix": ".box2 {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "flex: 2;",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "flex", "expected": "2" },
|
|
"message": "Setze <kbd>flex: 2</kbd>"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "flexbox-6",
|
|
"title": "Align Self",
|
|
"description": "<kbd>align-self</kbd> überschreibt <kbd>align-items</kbd> für ein einzelnes Element. So kannst du ein Item individuell auf der Querachse positionieren, während alle anderen Items ihrer Standard-Ausrichtung folgen.",
|
|
"task": "Füge <kbd>align-self: flex-start</kbd> zu <kbd>.middle</kbd> hinzu.",
|
|
"previewHTML": "<div class='wrap'><div class='box'>1</div><div class='box middle'>2</div><div class='box'>3</div></div>",
|
|
"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { background: steelblue; color: white; padding: 1rem; margin: 8px; text-align: center; font-weight: bold; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; } .middle { background: mediumseagreen; }",
|
|
"sandboxCSS": ".wrap { border: 2px dashed #aaa; padding: 1rem; display: flex; height: 12rem; align-items: center; }",
|
|
"codePrefix": ".middle {\n ",
|
|
"initialCode": "",
|
|
"codeSuffix": "\n}",
|
|
"solution": "align-self: flex-start;",
|
|
"previewContainer": "preview-area",
|
|
"validations": [
|
|
{
|
|
"type": "property_value",
|
|
"value": { "property": "align-self", "expected": "flex-start" },
|
|
"message": "Setze <kbd>align-self: flex-start</kbd>"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|