Skip to content

Flexbox

Cheatsheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Writing mode

flex direction will depend on whether your text is left/right or right/left or top/down

flex shorthand

  • Default
    • flex-grow: 0
    • flex-shrink: 1
    • flex-basis: auto
  • flex: 1
    • flex-grow: 1
    • flex-shrink: 0
    • flex-basis: 0

place-items: center stretch

For Grid and flexbox

  • align-items + justify-items

Last update: 2022-11-04