{"absolute_url": "/jbmckee/center-in-centered-div-flex-box/", "blog_post": false, "code": "    #content {\n        width: 800px;\n        background-color: lightgrey;\n        margin-left: auto;\n        margin-right: auto;\n        padding: 12px;\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        justify-content: center;\n        align-items: center;\n    }", "created": "2017-12-19T17:53:47.020304", "description": "", "description_rendered": "", "embed_url": "https://snipt.net/embed/e95e559e7d9e6103180c5af26bc7c6c0/", "full_absolute_url": "/jbmckee/center-in-centered-div-flex-box/", "id": 20, "lexer": "text", "line_count": 12, "log_entries": [{"code": "    #content {\n        width: 800px;\n        background-color: lightgrey;\n        margin-left: auto;\n        margin-right: auto;\n        padding: 12px;\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        justify-content: center;\n        align-items: center;\n    }", "created": "2017-12-19T17:53:47.237254", "diff": "--- \n+++ \n@@ -0,0 +1,12 @@\n+    #content {\n+        width: 800px;\n+        background-color: lightgrey;\n+        margin-left: auto;\n+        margin-right: auto;\n+        padding: 12px;\n+        display: flex;\n+        flex-direction: row;\n+        flex-wrap: wrap;\n+        justify-content: center;\n+        align-items: center;\n+    }", "user": "jbmckee"}], "meta": "", "modified": "2026-04-27T10:57:23.544905", "publish_date": "2017-12-19T17:53:46.903658", "raw_url": "/raw/e95e559e7d9e6103180c5af26bc7c6c0/", "resource_uri": "/api/public/snipt/20/", "slug": "center-in-centered-div-flex-box", "stylized": "<table class=\"highlighttable\"><tr><td class=\"linenos\"><div class=\"linenodiv\"><pre><a href=\"#L-1\"> 1</a>\n<a href=\"#L-2\"> 2</a>\n<a href=\"#L-3\"> 3</a>\n<a href=\"#L-4\"> 4</a>\n<a href=\"#L-5\"> 5</a>\n<a href=\"#L-6\"> 6</a>\n<a href=\"#L-7\"> 7</a>\n<a href=\"#L-8\"> 8</a>\n<a href=\"#L-9\"> 9</a>\n<a href=\"#L-10\">10</a>\n<a href=\"#L-11\">11</a>\n<a href=\"#L-12\">12</a></pre></div></td><td class=\"code\"><div class=\"highlight\"><pre><span></span><span id=\"L-1\"><a name=\"L-1\"></a>    #content {\n</span><span id=\"L-2\"><a name=\"L-2\"></a>        width: 800px;\n</span><span id=\"L-3\"><a name=\"L-3\"></a>        background-color: lightgrey;\n</span><span id=\"L-4\"><a name=\"L-4\"></a>        margin-left: auto;\n</span><span id=\"L-5\"><a name=\"L-5\"></a>        margin-right: auto;\n</span><span id=\"L-6\"><a name=\"L-6\"></a>        padding: 12px;\n</span><span id=\"L-7\"><a name=\"L-7\"></a>        display: flex;\n</span><span id=\"L-8\"><a name=\"L-8\"></a>        flex-direction: row;\n</span><span id=\"L-9\"><a name=\"L-9\"></a>        flex-wrap: wrap;\n</span><span id=\"L-10\"><a name=\"L-10\"></a>        justify-content: center;\n</span><span id=\"L-11\"><a name=\"L-11\"></a>        align-items: center;\n</span><span id=\"L-12\"><a name=\"L-12\"></a>    }\n</span></pre></div>\n</td></tr></table>", "tags": [{"absolute_url": "/public/tag/css/", "id": 3, "name": "css", "resource_uri": "/api/public/tag/3/", "snipts": "/api/public/snipt/?tag=3"}], "title": "Center in centered div flex box", "user": {"absolute_url": "/jbmckee/", "email_md5": "f4da96308b6db1b0b19738a7c105d3da", "id": 1, "resource_uri": "/api/public/user/1/", "snipts": "/api/public/snipt/?user=1", "snipts_count": 72, "username": "jbmckee"}}