{
    "path": "/home/krm/dev/mimer-academia/web/css/Exercises/four-small-dishes-with-flexbox/exercise.sv.json",
    "s": "Ignor",
    "invert": true,
    "level": 1,
    "title": [
        "Fyra små rätter med flexbox"
    ],
    "tags": [
        "layoute"
    ],
    "difficulty": "normal",
    "index": 23,
    "status": "beta",
    "author": [
        "krm"
    ],
    "created": {
        "year": 2026,
        "month": 3,
        "day": 18
    },
    "salution": "Many Flexboxes",
    "category": [
        "web"
    ],
    "description": [
        "Vi ska få till en enkel layoute med flexbox."
    ],
    "statments": [
        {
            "description": [
                "Gör så att Boxen A är dubbel så bred som alla andra boxar."
            ]
        },
        {
            "description": [
                "Se till att ellement B är under alla andra boxar i den box som B är i."
            ]
        },
        {
            "description": [
                "Se till att alla element som är i samma box som innehåller C är centrerade."
            ]
        },
        {
            "description": [
                "Se till att boxen som innehåller D justeras till höger."
            ]
        }
    ],
    "comment": [],
    "cards": [
        {
            "level": 1,
            "title": [
                "Kod"
            ],
            "description": [],
            "lang": "html",
            "code": "<!DOCTYPE html>\n<html lang=\"sv\">\n<head>\n<meta charset=\"utf-8\" />\n<style>\n\t\n\t</style>\n\t<style>\n\t  #container-big {\n\t display: flex;\n\t flex-direction: column;\nmargin: 10px;\npadding: 10px;\nborder-style: solid;\nborder-color: black;\nbackground-color: blue;\n\t}\n\t     \n.container {\n\t display: flex;\n\t height: 200px;\n\t width: 400px;\nmargin: 10px;\npadding: 10px;\nborder-style: solid;\nborder-color: black;\nbackground-color: red;\n\t     }\n\t     .item {\n\tbackground-color: green;\nborder-style: solid;\nmargin: 10px;\npadding: 10px;\nwidth: 50px;\nheight: 50px;\nfont-size: 32px;\n\t\t   } \n\t</style>\n</head>\n<body>\n<div id=\"container-1\" class=\"container\" >\n\t<div class=\"item\" >\n\t     1\n\t</div>\n<div id=\"A\" class=\"item\" >\n\t     A\n\t</div>\n\t<div class=\"item\" >\n\t     3\n\t</div>\n</div>\n<div id=\"container-2\" class=\"container\" >\n\t<div class=\"item\" >\n\t     1\n\t</div>\n<div id=\"B\" class=\"item\" >\n\t     B\n\t</div>\n\t<div class=\"item\" >\n\t     3\n\t</div>\n\t</div>\n<div id=\"container-3\" class=\"container\" >\n\t<div class=\"item\" >\n\t     1\n\t</div>\n<div id=\"C\" class=\"item\" >\n\t     C\n\t</div>\n\t<div class=\"item\" >\n\t     3\n\t</div>\n\t</div>\n<div id=\"container-4\" class=\"container\">\n\t<div class=\"item\" >\n\t     1\n\t</div>\n<div id=\"D\" class=\"item\" >\n\t     D\n\t</div>\n\t<div class=\"item\" >\n\t     3\n\t</div>\n</div>\n</div>\n</body>\n</html>",
            "statments": [],
            "comment": [
                "Du ska bara lägga till något mellan första style-tagarna."
            ]
        }
    ],
    "kind": "exercises"
}