# Flexbox Tutorial
* 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.

## 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
* Default is 0
    - 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
* 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

## Video 14: Pure Flexbox Navigation
* Style the container and add the display: flex property
* Style the items, add flex: <grow> <shrink> <basis> property
* add @media all and (max-width: <width>) properties
    - add wrap for the container
    - override grow, shrink and basis for the items

## Video 15: Mobile Content Reordering
* Container doesn't have to have display: flex from the beginning!
* Start a smaller media section @media all and (max-width: <width>)
    - display: flex for smaller media 
    - Change from (implicit) flex-direction: row to column
    - Add order for items
    - Use class change to hide menu (jQuery or others)

## Video 16: Nesting Flexbox for Horizontal and Vertical Centering
* Elements can be flex items *AND* flex containers simultaneously