Started flexbox tutorial.

Flexbox/Flexbox.md

@@ -0,0 +1,51 @@
+# Flexbox Tutorial
+https://flexbox.io/account/
+https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+
+## Video 2: display
+* By setting "display: flex" for a container, the immediate children become flex items.
+
+## Video 3: flex-direction
+* Sets the main axis (default: row)
+    - flex-direction: row               (left to right) 
+    - flex-direction: row-reverse       (right to left) 
+    - flex-direction: column            (top to bottom) 
+    - flex-direction: column-reverse    (bottom to top)
+* The cross axis is perpendicular to the main axis
+
+## Video 4: wrap
+* Flex tries to squeeze in all elements on the main axis unless you specify:
+    - flex-wrap: wrap           (direction of cross axis)
+    - flex-wrap: wrap-reverse   (reverse direction of cross axis)
+* flex-wrap: wrap-reverse reverses the order on the cross axis
+* The cross axis will keep the size if possible
+* You can do calculations for the width: "width: calc(33.333%-20px)"
+
+## Video 5: order
+* Changes the order of elemens
+    - order: 3          (puts element after others)
+    - order: -1         (puts element before others)
+* Positive and negative values are supported
+* Selection order remains the same (when you select sth with the mouse)!
+
+## Video 6: justify-content
+* justify-content justifies the content of a container (not of the items)
+* default is flex-start
+* justify-content manages the free space in a container's main direction:
+    - justify-content: flex-start       (puts available space at the end)
+    - justify-content: center           (puts available space left and right)
+    - justify-content: flex-end         (puts available space at the beginning)
+    - justify-content: space-between    (puts available space between elements)
+    - justify-content: space-around     (puts available space around elements)
+
+## Video 7: align-items
+* align-items aligns the _items_ on the cross axis
+* default is stretch
+* Options are:
+    - align-items: flex-start   (aligns items at the start of the cross axis)
+    - align-items: center       (aligns items in the center of the cross axis)
+    - align-items: flex-end     (aligns items at the end of the cross axis)
+    - align-items: stretch      (stretches item across the cross axis)
+    - align-items: baseline     (aligns baselines of items at the start of the cross axis)
+
+## Video 8: align-content

README.md

@@ -0,0 +1,8 @@
+# Collection of Tutorials I Came Across
+
+* Flexbox
+* React
+* Redux
+* ES6
+* Javascript
+* Sublime