====== 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/

===== justify-content =====
  * ''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.

===== align-items =====
  * ''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.

===== flex-direction =====
  * ''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.

===== More =====
It actually has more properties to set:
  * justify-content
  * align-items
  * flex-direction
  * order
  * align-self
  * flex-wrap
  * flex-flow
  * align-content