Demystifying CSS alignment

The context

Justify or align?

Two directions

  • One of the axes is the inline axis, it's the one each line of text runs on.
    By default on a web page, if you don't specify any writing-mode, this axis is horizontal, from left to right.
  • The other one is the block axis and it’s the one along which blocks are stacked.
    Again, by default, this axis is vertical, from top to bottom.

Remembering which direction is justify and which is align

Content, self or items?

Containers and subjects

  • A container is a rectangle within which a subject is being aligned.
  • And a subject is the thing (or things) that is (are) being aligned within the container.

Content

Self

Items

Example

  • content means content distribution. This applies to a container which, in the case of Flexbox would be the Flexbox element container itself (e.g. the <div> with display:flex),
  • justify works along the inline axis (so, horizontally by default),
  • finally the value is center.
  • items means self-alignment, right? But if you remember from before, it is a special part of the property that really applies to subjects, even if it is set on the container,
  • align works along the block axis (vertically by default),
  • and the alignment value is center.

Flexbox alignment

Content distribution (justify/align-content)

Self-alignment (justify/align-self)

Grid alignment

Content distribution (justify/align-content)

Self-alignment (justify/align-self)

Multi-column alignment

Content distribution (justify/align-content)

Self-alignment (justify/align-self)

Blocks alignment

Content distribution (justify/align-content)

Self-alignment (justify/align-self)

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Patrick Brosset

Patrick Brosset

1K Followers

Wearer of many hats: web dev, PM, DevTools engineer @Microsoft now, previously @Mozilla . Opinions my own. he/him. https://patrickbrosset.com