main axis and cross axis · which property belongs to which
Built as a memo rather than a table: the thing worth hanging it up for reads across the room, with the full reference in smaller type below it.
Three sizes in one archive — from a sheet on the fridge to a poster on the wall.
The coloured bar marks the axis a property acts on. Values of justify-content are shown as layouts rather than described.
The shorthand flex: 1 expands to grow 1, shrink 1 and basis 0% — not basis auto, as it looks. That zero changes everything: the base size becomes nothing, so content no longer affects width.
This is why three items set to flex: 1 come out exactly equal even when one holds a word and another holds a paragraph.
If you want the opposite, write flex: auto, where the basis stays auto, and longer text will genuinely claim more room.
Why the numbers can be trusted. Every countable number here is computed from data rather than typed in, and the sheet must pass 4 independent checks before it is allowed to build — how many items there are, the order they come in, and the claim in the highlighted box itself. If one fails, there is no file.
