HatScripts
All cheat sheets

CSS

Flexbox cheat sheet

Every property you need for CSS flexbox layout: container properties that control direction, wrapping and distribution, and item properties that control growth, shrinking and individual alignment.

Container

Item

Things worth remembering

  • justify-content works on the main axis, align-items on the cross axis. Change flex-direction and the two swap places.
  • flex: 1 is shorthand for flex: 1 1 0%, which ignores content width. Use flex: 1 1 auto to respect it.
  • A flex item cannot shrink below its min-content size unless you set min-width: 0 (or min-height: 0 in a column).

More CSS sheets

CSS GridTwo-dimensional layout with rows and columns.CSS selectorsCombinators, pseudo-classes and modern selector syntax.Tailwind v4CSS-first configuration and modern utilities.