{ "$schema": "../schemas/code-crispies-module-schema.json", "id": "flexbox", "title": "CSS Flexbox", "description": "Master the flexible box layout model for modern responsive designs", "difficulty": "intermediate", "lessons": [ { "id": "flexbox-1", "title": "Container", "description": "Before flexbox, creating even simple layouts required floats, positioning hacks, or table-based layouts. Flexbox (Flexible Box Layout) revolutionized CSS by providing a one-dimensional layout system designed specifically for distributing space and aligning content.

How it works: When you set display: flex on an element, it becomes a flex container. Its direct children automatically become flex items that flow along a main axis (horizontal by default). This single property transforms stacked block elements into a horizontal row.

The two axes:
• Main axis – The primary direction items flow (row = left→right)
• Cross axis – Perpendicular to main (row = top→bottom)

.container {\n  display: flex;\n  /* Items now flow horizontally */\n}
", "task": "Add display: flex to .wrap to arrange the boxes horizontally.", "previewHTML": "
1
2
3
", "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": "Set display: flex" } ] }, { "id": "flexbox-2", "title": "Direction & Wrap", "description": "Control the direction and wrapping of flex items within a container.", "task": "Add flex-direction: column and flex-wrap: wrap to .wrap.", "previewHTML": "
1
2
3
4
5
", "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": "Set flex-direction: column", "options": { "exact": true } }, { "type": "property_value", "value": { "property": "flex-wrap", "expected": "wrap" }, "message": "Set flex-wrap: wrap", "options": { "exact": true } } ] }, { "id": "flexbox-3", "title": "Justify Content", "description": "Learn how to align flex items along the main axis of the flex container.", "task": "Add justify-content: space-between to .wrap to distribute the boxes evenly.", "previewHTML": "
1
2
3
", "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": "Set justify-content: space-between", "options": { "exact": true } } ] }, { "id": "flexbox-4", "title": "Align Items", "description": "Control how flex items are aligned along the cross axis of the flex container.", "task": "Add align-items: center to .wrap to vertically center the boxes.", "previewHTML": "
1
2
3
", "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": "Set align-items: center", "options": { "exact": true } } ] }, { "id": "flexbox-5", "title": "Flex Grow", "description": "The flex property controls how much an item grows relative to others.", "task": "Add flex: 2 to .box2 to make it grow twice as wide.", "previewHTML": "
1
2
3
", "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": "Set flex: 2" } ] }, { "id": "flexbox-6", "title": "Align Self", "description": "Use align-self to override alignment for a single flex item.", "task": "Add align-self: flex-start to .middle to move it to the top.", "previewHTML": "
1
2
3
", "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": "Set align-self: flex-start" } ] } ] }