finished chapter 13

Flexbox/Flexbox.md

@@ -1,6 +1,6 @@
 # Flexbox Tutorial
-https://flexbox.io/account/
-https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+* Video course: https://flexbox.io/account/
+* Flexbox guide: 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.
@@ -49,3 +49,33 @@ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
     - align-items: baseline     (aligns baselines of items at the start of the cross axis)
 
 ## Video 8: align-content
+* align-content justifies the content of a container (not the items)
+* default is stretch
+* align-content manages the free space in a container's cross direction:
+    - align-content: flex-start       (puts available space at the end)
+    - align-content: center           (puts available space left and right)
+    - align-content: flex-end         (puts available space at the beginning)
+    - align-content: space-between    (puts available space between elements)
+    - align-content: space-around     (puts available space around elements)
+
+## Video 9: align-self
+* overrides the alignment of an element over the container's setting
+* takes the same arguments as align-items
+
+## Video 10: flex
+* setting for a flex item (not a container)
+* how much **extra** space does an element get?
+
+## Video 11: flex-grow, flex-shrink and flex-basis
+* flex consists of three properties:
+    - flex-grow     (if there is extra space, how much sould the element get)
+    - flex-shrink   (if there is not enough room, how much more should the element shrink)
+    - flex-basis    (how big is the element ideally?)
+* flex: 1 5 400px is shorthand for flex-grow: 1, flex-shrink: 5, flex-basis: 400px
+
+## Video 13: Crossbrowser support and Autoprefixer
+* Flexbox has been around for come time
+* Older browsers use different keywords and show different behavior
+* Use Autoprefixer to crosscompile the CSS3
+
+