{
"$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": "Learn how to create a flex container and understand the main and cross axes.",
"task": "Add display: flex to .wrap to create a flexbox layout.",
"previewHTML": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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": "",
"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"
}
]
}
]
}