Master CSS Flexbox and Grid: 58 Flashcards on Axes, fr Units and Alignment

Flexbox and Grid share half their vocabulary — justify-content, align-items, align-self, gap, order — yet the same word does different work in each system. That overlap is exactly why people mix them up, and why flashcards work so well here: you drill each property in its context until "which axis?" becomes automatic.

The Flip It deck CSS: Flexbox & Grid (code WL6101, 58 cards) runs in two clean blocks: cards 1-16 cover Flexbox, cards 17-41 cover Grid, and cards 42-58 are mixed recipes and comparisons.

Cards straight from the deck

What the 58 cards cover

Flexbox: display: flex / inline-flex, main axis, cross axis, flex-direction (row, row-reverse, column, column-reverse), flex-wrap, flex-flow, justify-content (space-between, space-around, space-evenly), align-items (stretch, baseline), align-self, align-content, flex-grow, flex-shrink, flex-basis, the flex shorthand, centering, sticky footer with min-height: 100vh.

Grid: grid-template-columns, grid-template-rows, fr, repeat(), minmax(), fit-content(), auto-fit, auto-fill, gap / row-gap / column-gap, grid-column, grid-row, span, grid-area, grid-template-areas, grid-auto-flow (dense), grid-auto-rows, grid-auto-columns, implicit vs explicit grid, grid line, grid track, grid cell, overlapping items with z-index, subgrid, place-items.

Tip 1: build an alignment matrix, not a list

Cards 6-8 (Flexbox) and 35-41 (Grid) reuse the same names. Study them as a 2×2 grid: justify-* = main/inline axis, align-* = cross/block axis; *-content moves the whole set of tracks or lines, *-items sets the default for every child, *-self overrides one child. Then add the one asymmetry the deck never states: justify-items and justify-self are ignored in Flexbox. To push a single flex item to the end, use margin-left: auto (or margin-inline-start: auto). Write that as card 59.

Also note that cards 36-41 say "horizontally" and "vertically" — that's true only in horizontal writing modes. Read them as inline axis and block axis and they stay correct in Japanese or Arabic layouts too.

Tip 2: add the min-width: 0 caveat to card 47

Card 47 says flex: 1 on each item gives equal-width columns. That's only true until one item holds a long URL or a wide table: flex items default to min-width: auto, so they refuse to shrink below their content. Append "+ min-width: 0 if content may overflow" to the back. Card 48's Grid version has a related fix: use repeat(3, minmax(0, 1fr)) instead of plain 1fr.

Study order

1. Flex block first (cards 1-16), then the vocabulary cards 44-46 and 52-53 (line, track, cell, implicit/explicit) before the Grid placement cards.
2. Pair cards 47/48 and 16/35 so you always answer "how in Flexbox and how in Grid?"
3. Finish with the recipes (50, 51, 54-56) by typing each one into a CodePen, not just reading it.

Already know the box model? Pair this deck with the CSS Box Model, Selectors and Media Queries study guide.

Find WL6101 — CSS: Flexbox & Grid in the library on Flip It.