diff --git a/blog_data/snippetList.json b/blog_data/snippetList.json
index 49d5dbd6a..dd4c61db9 100644
--- a/blog_data/snippetList.json
+++ b/blog_data/snippetList.json
@@ -139,6 +139,23 @@
         "hash": "f4cc0d29901e6a9fd75b94396db60740431bde26adc6342455f22eaf212350c8"
       }
     },
+    {
+      "id": "flexbox-cheatsheet",
+      "type": "snippetListing",
+      "title": "Flexbox Cheat Sheet",
+      "attributes": {
+        "text": "**Container**\n\n- `display: flex` or `display: inline-flex`: creates a flex context (or an inline flex context) for direct children of this element\n- `flex-direction` determines the main and cross axis for the container, valid values are:\n  - `row` (default): horizontal, in the direction of writing (left to right for English)\n  - `row-reverse`: horizontal, in the opposite direction of writing (right to left for English)\n  - `column`: vertical, top to bottom\n  - `column-reverse`: vertical, bottom to top\n- `flex-wrap` determines if flex items will try to fit in one line, valid values are:\n  - `nowrap` (default): all flex items will be on one line\n  - `wrap`: flex items will wrap onto multiple lines, top to bottom\n  - `wrap-reverse`: flex items will wrap onto multiple lines, bottom to top\n- `flex-flow`: shorthand combining `flex-direction` and `flex-wrap`\n  - Formal syntax: `flex-flow: <'flex-direction'> || <'flex-wrap'>`\n- `justify-content` defines the alignment along the main axis, valid values are:\n  - `flex-start` (default): pack flex items from the start\n  - `flex-end`: pack flex items from the end\n  - `start`: pack items from the start\n  - `end`: pack items from the end\n  - `left`: pack items from the left\n  - `right`: pack items from the right\n  - `center`: pack items around the center\n  - `space-around`: distribute items evenly with equal space around them\n  - `space-between`: distribute items evenly with equal space between them\n  - `space-evenly`: distribute items evenly, ensuring equal space between any two items\n  - `stretch`: distribute items evenly, stretching auto-sized items to fit the container\n- `align-items` defines the alignment along the cross axis, valid values are:\n  - `flex-start` (default): pack flex items from the start\n  - `flex-end`: pack flex items from the end\n  - `start`: pack items from the start\n  - `end`: pack items from the end\n  - `center`: pack items around the center\n  - `baseline`: align items based on their baselines\n  - `stretch`: stretch items to fill the container\n- `align-content` defines the alignment of extra space along the cross axis, valid values are:\n  - `flex-start` (default): pack flex items from the start\n  - `flex-end`: pack flex items from the end\n  - `start`: pack items from the start\n  - `end`: pack items from the end\n  - `center`: pack items around the center\n  - `space-around`: distribute items evenly with equal space around them\n  - `space-between`: distribute items evenly with equal space between them\n  - `space-evenly`: distribute items evenly, ensuring equal space between any two items\n  - `stretch`: distribute items evenly, stretching auto-sized items to fit the container\n\n![Diagram of Flexbox properties](./blog_images/flexbox-diagram.png)\n\n**Items**\n\n- `flex-grow` determines how much the item can grow if necessary\n  - Accepts a single positive number (unitless), default value is `0`\n  - Specifies how much of the remaining space in the flex container should be assigned to the item\n  - The remaining space is the size of the flex container minus the size of all flex items' sizes together\n  - If all items have the same `flex-grow`, all items will receive an equal share of the remaining space\n  - If not all items have the same `flex-grow`, the remaining space is distributed according to the ratio defined by these values\n- `flex-shrink` determines how much the items can shrink if necessary\n  - Accepts a single positive number (unitless), default value is `1`\n  - If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`\n- `flex-basis` determines the initial size of a flex item before the remaining space is distributed\n  - Can use any valid `width` value, intrinsic size values, `auto` (default) or `content`\n  - `auto` means \"look at my `width` or `height` property\", whereas `content` is used for automatic sizing\n- `flex`: shorthand combining `flex-grow`, `flex-shrink` and `flex-basis`\n  - Formal syntax: `flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]`\n- `align-self` allows the item to override the default `align-items` specified by the container\n  - Valid values are the same as those of the `align-items` property in the container\n- `order` determines the ordering of the item\n  - Accepts an integer value\n  - Items in a container are sorted by ascending `order` value and then by their source code order\n  - Might cause accessibility issues if used incorrectly\n\n**Image credit:** [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n",
+        "tags": [
+          "css",
+          "layout",
+          "flexbox",
+          "cheatsheet"
+        ]
+      },
+      "meta": {
+        "hash": "fbb0468c7c8ad791d31faed987a824b72ee754e37a00c7eb077e7d9593b3293f"
+      }
+    },
     {
       "id": "javascript-deep-freeze-object",
       "type": "snippetListing",
diff --git a/blog_data/snippets.json b/blog_data/snippets.json
index c07a7eaec..716934f17 100644
--- a/blog_data/snippets.json
+++ b/blog_data/snippets.json
@@ -230,6 +230,33 @@
         "authorCount": 2
       }
     },
+    {
+      "id": "flexbox-cheatsheet",
+      "title": "Flexbox Cheat Sheet",
+      "type": "blog.cheatsheet",
+      "attributes": {
+        "fileName": "flexbox-cheatsheet.md",
+        "cover": "blog_images/flexbox.jpg",
+        "excerpt": "Flexbox allows you to create fluid layouts easily. If you find yourself constantly looking up the syntax or how it work, this handy cheatsheet is all you need.",
+        "authors": [
+          "chalarangelo"
+        ],
+        "text": "**Container**\n\n- `display: flex` or `display: inline-flex`: creates a flex context (or an inline flex context) for direct children of this element\n- `flex-direction` determines the main and cross axis for the container, valid values are:\n  - `row` (default): horizontal, in the direction of writing (left to right for English)\n  - `row-reverse`: horizontal, in the opposite direction of writing (right to left for English)\n  - `column`: vertical, top to bottom\n  - `column-reverse`: vertical, bottom to top\n- `flex-wrap` determines if flex items will try to fit in one line, valid values are:\n  - `nowrap` (default): all flex items will be on one line\n  - `wrap`: flex items will wrap onto multiple lines, top to bottom\n  - `wrap-reverse`: flex items will wrap onto multiple lines, bottom to top\n- `flex-flow`: shorthand combining `flex-direction` and `flex-wrap`\n  - Formal syntax: `flex-flow: <'flex-direction'> || <'flex-wrap'>`\n- `justify-content` defines the alignment along the main axis, valid values are:\n  - `flex-start` (default): pack flex items from the start\n  - `flex-end`: pack flex items from the end\n  - `start`: pack items from the start\n  - `end`: pack items from the end\n  - `left`: pack items from the left\n  - `right`: pack items from the right\n  - `center`: pack items around the center\n  - `space-around`: distribute items evenly with equal space around them\n  - `space-between`: distribute items evenly with equal space between them\n  - `space-evenly`: distribute items evenly, ensuring equal space between any two items\n  - `stretch`: distribute items evenly, stretching auto-sized items to fit the container\n- `align-items` defines the alignment along the cross axis, valid values are:\n  - `flex-start` (default): pack flex items from the start\n  - `flex-end`: pack flex items from the end\n  - `start`: pack items from the start\n  - `end`: pack items from the end\n  - `center`: pack items around the center\n  - `baseline`: align items based on their baselines\n  - `stretch`: stretch items to fill the container\n- `align-content` defines the alignment of extra space along the cross axis, valid values are:\n  - `flex-start` (default): pack flex items from the start\n  - `flex-end`: pack flex items from the end\n  - `start`: pack items from the start\n  - `end`: pack items from the end\n  - `center`: pack items around the center\n  - `space-around`: distribute items evenly with equal space around them\n  - `space-between`: distribute items evenly with equal space between them\n  - `space-evenly`: distribute items evenly, ensuring equal space between any two items\n  - `stretch`: distribute items evenly, stretching auto-sized items to fit the container\n\n![Diagram of Flexbox properties](./blog_images/flexbox-diagram.png)\n\n**Items**\n\n- `flex-grow` determines how much the item can grow if necessary\n  - Accepts a single positive number (unitless), default value is `0`\n  - Specifies how much of the remaining space in the flex container should be assigned to the item\n  - The remaining space is the size of the flex container minus the size of all flex items' sizes together\n  - If all items have the same `flex-grow`, all items will receive an equal share of the remaining space\n  - If not all items have the same `flex-grow`, the remaining space is distributed according to the ratio defined by these values\n- `flex-shrink` determines how much the items can shrink if necessary\n  - Accepts a single positive number (unitless), default value is `1`\n  - If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`\n- `flex-basis` determines the initial size of a flex item before the remaining space is distributed\n  - Can use any valid `width` value, intrinsic size values, `auto` (default) or `content`\n  - `auto` means \"look at my `width` or `height` property\", whereas `content` is used for automatic sizing\n- `flex`: shorthand combining `flex-grow`, `flex-shrink` and `flex-basis`\n  - Formal syntax: `flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]`\n- `align-self` allows the item to override the default `align-items` specified by the container\n  - Valid values are the same as those of the `align-items` property in the container\n- `order` determines the ordering of the item\n  - Accepts an integer value\n  - Items in a container are sorted by ascending `order` value and then by their source code order\n  - Might cause accessibility issues if used incorrectly\n\n**Image credit:** [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n",
+        "tags": [
+          "css",
+          "layout",
+          "flexbox",
+          "cheatsheet"
+        ]
+      },
+      "meta": {
+        "hash": "fbb0468c7c8ad791d31faed987a824b72ee754e37a00c7eb077e7d9593b3293f",
+        "firstSeen": "1588368109",
+        "lastUpdated": "1588368109",
+        "updateCount": 2,
+        "authorCount": 2
+      }
+    },
     {
       "id": "javascript-deep-freeze-object",
       "title": "How can I deep freeze an object in JavaScript?",
@@ -441,7 +468,7 @@
     {
       "id": "regexp-cheatsheet",
       "title": "Regular Expressions Cheat Sheet",
-      "type": "blog.blog",
+      "type": "blog.cheatsheet",
       "attributes": {
         "fileName": "regexp-cheatsheet.md",
         "cover": "blog_images/cheatsheet1.jpg",
@@ -460,8 +487,8 @@
       "meta": {
         "hash": "b101a1baa164ded445484e1d09414ba53ee16a399c20f9611b4b0c2bcdb43ee0",
         "firstSeen": "1588336747",
-        "lastUpdated": "1588336747",
-        "updateCount": 2,
+        "lastUpdated": "1588368109",
+        "updateCount": 3,
         "authorCount": 2
       }
     },