https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

https://codepen.io/justd/full/yydezN/

flex container

  • flex-direction
  • flex-wrap:
  • flex-flow: flex-direction + flex-wrap, default: row nowrap

  • justify-content
  • align-items
  • align-content
  • item1
  • item2
  • item3
  • item4
  • item5
  • item6
  • item7
  • item8
  • item1
  • item2
  • item3
  • item4
  • item5
  • flex item

  • order: default is 0
  • flex-grow: default is 0
  • flex-shrink: default is 1
  • flex-basis: default auto
  • flex: This is the shorthand for flex-grow, flex-shrink and flex-basis combined
  • align-self: auto | flex-start | flex-end | center | baseline | stretch
  • Note that float, clear and vertical-align have no effect on a flex item.