Flexbox.md 2.3 KB

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