Skip to content

Instantly share code, notes, and snippets.

@shaunlebron

shaunlebron/flexbox-rosetta.md

Last active April 13, 2024 17:32
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 shaunlebron/e014c293ea825f709591a487134d5f2e to your computer and use it in GitHub Desktop.
Save shaunlebron/e014c293ea825f709591a487134d5f2e to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox Rosetta Stone
Raw
flexbox-rosetta.md

Flexbox vs Inline alignment

flex-flow: row wrap shows how inline text alignment is a special case of flexbox:

TEXT-ALIGN:         left  | center | right | justify       | __           | __
→ JUSTIFY-CONTENT:  start | middle | end   | space-between | space-around | space-evenly

VERTICAL-ALIGN:     top   | middle | bottom | __
→ ALIGN-SELF:       start | center | end    | stretch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment