Flexbox Tutorial
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: property
- add @media all and (max-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: )
- 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
