# 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