Add Flexbox cheatsheet

blog_posts/flexbox-cheatsheet.md

@@ -0,0 +1,80 @@
+---
+title: Flexbox Cheat Sheet
+type: cheatsheet
+tags: css,layout,flexbox,cheatsheet
+authors: chalarangelo
+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.
+---
+
+**Container**
+
+- `display: flex` or `display: inline-flex`: creates a flex context (or an inline flex context) for direct children of this element
+- `flex-direction` determines the main and cross axis for the container, valid values are:
+  - `row` (default): horizontal, in the direction of writing (left to right for English)
+  - `row-reverse`: horizontal, in the opposite direction of writing (right to left for English)
+  - `column`: vertical, top to bottom
+  - `column-reverse`: vertical, bottom to top
+- `flex-wrap` determines if flex items will try to fit in one line, valid values are:
+  - `nowrap` (default): all flex items will be on one line
+  - `wrap`: flex items will wrap onto multiple lines, top to bottom
+  - `wrap-reverse`: flex items will wrap onto multiple lines, bottom to top
+- `flex-flow`: shorthand combining `flex-direction` and `flex-wrap`
+  - Formal syntax: `flex-flow: <'flex-direction'> || <'flex-wrap'>`
+- `justify-content` defines the alignment along the main axis, valid values are:
+  - `flex-start` (default): pack flex items from the start
+  - `flex-end`: pack flex items from the end
+  - `start`: pack items from the start
+  - `end`: pack items from the end
+  - `left`: pack items from the left
+  - `right`: pack items from the right
+  - `center`: pack items around the center
+  - `space-around`: distribute items evenly with equal space around them
+  - `space-between`: distribute items evenly with equal space between them
+  - `space-evenly`: distribute items evenly, ensuring equal space between any two items
+  - `stretch`: distribute items evenly, stretching auto-sized items to fit the container
+- `align-items` defines the alignment along the cross axis, valid values are:
+  - `flex-start` (default): pack flex items from the start
+  - `flex-end`: pack flex items from the end
+  - `start`: pack items from the start
+  - `end`: pack items from the end
+  - `center`: pack items around the center
+  - `baseline`: align items based on their baselines
+  - `stretch`: stretch items to fill the container
+- `align-content` defines the alignment of extra space along the cross axis, valid values are:
+  - `flex-start` (default): pack flex items from the start
+  - `flex-end`: pack flex items from the end
+  - `start`: pack items from the start
+  - `end`: pack items from the end
+  - `center`: pack items around the center
+  - `space-around`: distribute items evenly with equal space around them
+  - `space-between`: distribute items evenly with equal space between them
+  - `space-evenly`: distribute items evenly, ensuring equal space between any two items
+  - `stretch`: distribute items evenly, stretching auto-sized items to fit the container
+
+![Diagram of Flexbox properties](./blog_images/flexbox-diagram.png)
+
+**Items**
+
+- `flex-grow` determines how much the item can grow if necessary
+  - Accepts a single positive number (unitless), default value is `0`
+  - Specifies how much of the remaining space in the flex container should be assigned to the item
+  - The remaining space is the size of the flex container minus the size of all flex items' sizes together
+  - If all items have the same `flex-grow`, all items will receive an equal share of the remaining space
+  - If not all items have the same `flex-grow`, the remaining space is distributed according to the ratio defined by these values
+- `flex-shrink` determines how much the items can shrink if necessary
+  - Accepts a single positive number (unitless), default value is `1`
+  - If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`
+- `flex-basis` determines the initial size of a flex item before the remaining space is distributed
+  - Can use any valid `width` value, intrinsic size values, `auto` (default) or `content`
+  - `auto` means "look at my `width` or `height` property", whereas `content` is used for automatic sizing
+- `flex`: shorthand combining `flex-grow`, `flex-shrink` and `flex-basis`
+  - Formal syntax: `flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]`
+- `align-self` allows the item to override the default `align-items` specified by the container
+  - Valid values are the same as those of the `align-items` property in the container
+- `order` determines the ordering of the item
+  - Accepts an integer value
+  - Items in a container are sorted by ascending `order` value and then by their source code order
+  - Might cause accessibility issues if used incorrectly
+
+**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)

blog_posts/regexp-cheatsheet.md

@@ -1,6 +1,6 @@
 ---
 title: Regular Expressions Cheat Sheet
-type: blog
+type: cheatsheet
 tags: javascript,string,regexp,cheatsheet
 authors: chalarangelo
 cover: blog_images/cheatsheet1.jpg

snippet-template.md

@@ -3,7 +3,7 @@ title: My amazing story
 type: story
 tags: javascript,webdev
 authors: someauthor,someotherauthor
-cover: blog_images/my-image.png
+cover: blog_images/my-image.jpg
 excerpt: A short summary of your story up to 180 characters long.
 ---