{
"$schema": "../../schemas/code-crispies-module-schema.json",
"id": "flexbox",
"title": "CSS Flexbox",
"description": "Опануйте модель гнучкого блочного макету для сучасних адаптивних дизайнів",
"difficulty": "intermediate",
"lessons": [
{
"id": "flexbox-1",
"title": "Container",
"description": "До flexbox навіть прості макети вимагали floats, хаків позиціонування або табличних макетів. Flexbox (Flexible Box Layout) революціонізував CSS, надавши одновимірну систему макетування, спеціально розроблену для розподілу простору та вирівнювання вмісту.
Як це працює: Коли ви встановлюєте display: flex на елемент, він стає flex-контейнером. Його прямі нащадки автоматично стають flex-елементами, що розташовуються вздовж головної осі (горизонтально за замовчуванням). Ця одна властивість перетворює вкладені блокові елементи в горизонтальний ряд.
Дві осі: • Головна вісь – Основний напрямок потоку елементів (row = зліва→направо) • Поперечна вісь – Перпендикулярна до головної (row = зверху→вниз)
.nav {\n display: flex;\n}
",
"task": "Це навігаційне меню розташовується вертикально. Додайте display: flex, щоб розташувати посилання горизонтально.",
"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": "Встановіть display: flex"
}
]
},
{
"id": "flexbox-2",
"title": "Gap",
"description": "Властивість gap додає послідовний відступ між flex-елементами без потреби у відступах (margins). Вона створює простір лише між елементами, а не по краях.",
"task": "Додайте gap: 1rem, щоб рівномірно розташувати навігаційні посилання.",
"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": "Встановіть gap: 1rem"
}
]
},
{
"id": "flexbox-3",
"title": "Justify Content",
"description": "justify-content розподіляє елементи вздовж головної осі. Поширені значення: • flex-start – групувати на початку • flex-end – групувати в кінці • center – центрувати елементи • space-between – рівний простір між елементами • space-around – рівний простір навколо елементів",
"task": "Перемістіть кнопку \"Login\" праворуч, встановивши justify-content: space-between на навігації.",
"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": "Встановіть justify-content: space-between"
}
]
},
{
"id": "flexbox-4",
"title": "Align Items",
"description": "align-items керує вирівнюванням по поперечній осі (вертикально, коли flex-direction це row). Значення включають: • stretch – розтягнути для заповнення (за замовчуванням) • flex-start – вирівняти вгору • flex-end – вирівняти вниз • center – центрувати вертикально",
"task": "Логотип та навігаційні посилання мають різну висоту. Відцентруйте їх вертикально за допомогою 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": "Встановіть align-items: center"
}
]
},
{
"id": "flexbox-5",
"title": "Flex Wrap",
"description": "За замовчуванням flex-елементи стискаються в один рядок. flex-wrap: wrap дозволяє елементам переходити на кілька рядків, коли місця недостатньо.",
"task": "Ці картки виходять за межі контейнера. Додайте flex-wrap: wrap, щоб дозволити їм переходити на нові рядки.",
"previewHTML": "