reject:flexbox

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
  • reject/flexbox.txt
  • Last modified: 2020/10/27 09:56
  • by chongtin