Skip to content

Instantly share code, notes, and snippets.

@jayliew

jayliew/flexbox-css-cheat.md

Created March 7, 2024 19:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jayliew/ef62761d64d88b80e9983937aa86fc0b to your computer and use it in GitHub Desktop.
Save jayliew/ef62761d64d88b80e9983937aa86fc0b to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox CSS cheat
Raw
flexbox-css-cheat.md

In this simplified example:

  • main axis = horizontal
  • cross axis = vertical
  • "thing" (made up nomenclature) = item

Properties on the "parent" (container)

justify-content

  • Specify where the extra space goes horizontally

align-items

  • Specify where the actual "thing" (not the extra space!) sits vertically
  • Can align the baseline of the text inside of "things"

align-content

  • Specify where the space goes vertically
  • Only applicable when there are multiple lines

Property on the "child"

align-self

  • override align-items for a "thing"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment