Skip to content

Instantly share code, notes, and snippets.

@guiliredu
Created June 7, 2019 20:00
Show Gist options
  • Save guiliredu/8d4b8b60743a78a305caa7ac149e6628 to your computer and use it in GitHub Desktop.
Save guiliredu/8d4b8b60743a78a305caa7ac149e6628 to your computer and use it in GitHub Desktop.
CSS 2019 Studies

CSS 2019 Studies

Contents

Flexbox

#parent {
  display:flex;
  justify-content:flex-start|flex-end|center|space-between|space-around;
  align-content:flex-start|flex-end|center|space-between|space-around|stretch;
  align-items/align-self:flex-start|flex-end|center|baseline|stretch;
  flex-direction:row|row-reverse|column|column-reverse;
  order:0;
  flex-wrap:nowrap|wrap|wrap-reverse;
  flex-flow:column wrap;
}

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/align-self

  • 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.

align-content

  • flex-start: Lines are packed at the top of the container.
  • flex-end: Lines are packed at the bottom of the container.
  • center: Lines are packed at the vertical center of the container.
  • space-between: Lines display with equal spacing between them.
  • space-around: Lines display with equal spacing around them.
  • stretch: Lines 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.

flex-wrap

  • nowrap: Every item is fit to a single line.
  • wrap: Items wrap around to additional lines.
  • wrap-reverse: Items wrap around to additional lines in reverse.

flex-flow

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment