Do I really understand flexbox?

Recently during one of my assignments, I was wondering if I really understand flexbox? Do I really know, when to use flexbox or grid or absolute/relative position or align-items? Since my answer is no, doing a refresher flexbox course right now that is free from Washington University.

Flexbox Game to to review flexbox.

Things I learned by playing this game.

  1. It’s not either or. You can use both justify-content and align-items in a declaration. There are times when you want to state the horizontal and vertical alignment of the thing.
  2. You can use both justify-content and align-items together if for example the justify you just want to use for spacing and the align you want to use fo the position.
  3. (Verbatim copied from the game) When the flex direction is a column, justify-content changes to the vertical and align-items to the horizontal.
  4. You can also use justify-content, align-items and flex-direction together.
  5. You can also use order: #; (Don’t put angle brackets like the example).
  6. You can combine flex-direction and flex-wrap into flex-flow.
  7. Try align-content once in a while.
  8. When you think about wrap, don’t just think about wrap!!!! Don’t forget wrap-reverse. That’s a hint for the final question.

Learned later: flex-grow makes a vertical line adjust based on the length of the paragraph beside it, like in a documentation file