{
"$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)
.nav {\n display: flex;\n}
",
"task": "This navigation menu stacks vertically. Add display: flex to .nav to arrange the links horizontally.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); }",
"sandboxCSS": "",
"codePrefix": ".nav {\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": "Gap",
"description": "The gap property adds consistent spacing between flex items without needing margins. It only creates space between items, not around the edges.",
"task": "Add gap: 1rem to space out the navigation links evenly.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; background: rgba(255,255,255,0.1); }",
"sandboxCSS": "",
"codePrefix": ".nav {\n ",
"initialCode": "",
"codeSuffix": "\n}",
"solution": "gap: 1rem;",
"previewContainer": "preview-area",
"validations": [
{
"type": "property_value",
"value": { "property": "gap", "expected": "1rem" },
"message": "Set gap: 1rem"
}
]
},
{
"id": "flexbox-3",
"title": "Justify Content",
"description": "justify-content distributes items along the main axis. Common values: • flex-start – pack items at the start • flex-end – pack at the end • center – center items • space-between – equal space between items • space-around – equal space around items",
"task": "Push the \"Login\" button to the right by setting justify-content: space-between on the nav.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .nav { background: #1a1a2e; padding: 1rem; display: flex; } .links { display: flex; gap: 8px; } .nav a { color: white; text-decoration: none; padding: 8px 1rem; border-radius: 4px; } .nav a:hover { background: rgba(255,255,255,0.1); } .login { background: steelblue; }",
"sandboxCSS": "",
"codePrefix": ".nav {\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"
}
]
},
{
"id": "flexbox-4",
"title": "Align Items",
"description": "align-items controls alignment on the cross axis (vertical when flex-direction is row). Values include: • stretch – stretch to fill (default) • flex-start – align to top • flex-end – align to bottom • center – center vertically",
"task": "The logo and nav links have different heights. Center them vertically with align-items: center.",
"previewHTML": "
ACME
",
"previewBaseCSS": "body { font-family: system-ui, sans-serif; margin: 0; } .header { background: white; padding: 1rem 2rem; display: flex; justify-content: space-between; border-bottom: 1px solid #eee; } .logo { font-size: 1.5rem; font-weight: bold; color: steelblue; } nav { display: flex; gap: 1rem; } nav a { color: #333; text-decoration: none; font-size: 0.9rem; }",
"sandboxCSS": "",
"codePrefix": ".header {\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"
}
]
},
{
"id": "flexbox-5",
"title": "Flex Wrap",
"description": "By default, flex items squeeze onto one line. flex-wrap: wrap allows items to flow onto multiple lines when they run out of space.",
"task": "These cards overflow the container. Add flex-wrap: wrap to allow them to wrap to new rows.",
"previewHTML": "