Flexbox (CSS)

Flexbox is a css layout module, basically used by a lot of page in these days. Material UI <Grid><Grid> use it, so we kind of mention it here.

To learn it from the documentation, go here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

To learn it from playing a game, go here: https://flexboxfroggy.com/

• flex-start: Items align to the left side of the container.
• flex-end: Items align to the right side of the container.
• center: Items align at the center of the container.
• space-between: Items display with equal spacing between them.
• space-around: Items display with equal spacing around them.

• flex-start: Items align to the top of the container.
• flex-end: Items align to the bottom of the container.
• center: Items align at the vertical center of the container.
• baseline: Items display at the baseline of the container.
• stretch: Items are stretched to fit the container.

• row: Items are placed the same as the text direction.
• row-reverse: Items are placed opposite to the text direction.
• column: Items are placed top to bottom.
• column-reverse: Items are placed bottom to top.

It actually has more properties to set:

• justify-content
• align-items
• flex-direction
• order
• align-self
• flex-wrap
• flex-flow
• align-content