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.
- 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.
- 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.
- (Verbatim copied from the game) When the flex direction is a column,
justify-content
changes to the vertical andalign-items
to the horizontal. - You can also use justify-content, align-items and flex-direction together.
- You can also use order: #; (Don’t put angle brackets like the example).
- You can combine flex-direction and flex-wrap into flex-flow.
- Try align-content once in a while.
- 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