A deep dive into CSS Box Alignment properties (justify-content, align-items, align-self, etc.) explaining the underlying mental model. Covers the difference between inline and block axes, the meaning of 'justify' vs 'align', and the distinction between 'content', 'items', and 'self' suffixes. Applies these concepts across Flexbox, CSS Grid, multi-column, and block layouts, showing what the alignment container and subject are in each case.
Table of contents
The contextJustify or align?Content, self or items?Flexbox alignmentGrid alignmentMulti-column alignmentBlock alignmentConclusionSort: