CSS FlexboxOne axis, two alignment properties, and the handful of values that do everything.Computingjustify-content works along the main axis.align-items works across it.flex-direction: row → main axis horizontal · column → verticalCentre a box, both axesdisplay:flex; justify-content:center; align-items:centerThe classic. Works at any size.Push one item to the rightmargin-left: auto on that itemCleaner than space-between when only one item moves.Equal columnsflex: 1 on each childShorthand for grow 1, shrink 1, basis 0.THE COMMON MISTAKEalign-items: center to centre horizontally in a rowjustify-content: centerIn a row the main axis is horizontal, so justify-content is the horizontal one.Switch to column and they swap.gap works in flexbox too — you rarely need margins between childrenany more.CSS Flexboxlearnposters.com
CSS Flexbox — printable computing wall chart from LearnPosters. Free vector PDF, US Letter and A4.

What’s on the CSS Flexbox poster

The rule, 3 worked examples, and the mistake everyone makes.

gap works in flexbox too — you rarely need margins between children any more.

Questions about the CSS Flexbox poster

What’s on the CSS Flexbox poster?
The rule, 3 worked examples, and the mistake everyone makes. justify-content works along the main axis. align-items works across it.; flex-direction: row → main axis horizontal · column → vertical; Centre a box, both axes = display:flex; justify-content:center; align-items:center; Push one item to the right = margin-left: auto on that item; Equal columns = flex: 1 on each child; Common mistake: align-items: center to centre horizontally in a row → justify-content…. gap works in flexbox too — you rarely need margins between children any more.
Who is the CSS Flexbox poster for?
CSS Flexbox belongs to the Computing section rather than to a school year, because computing is not something one grade owns. Anyone learning the web can pin it up — a beginner, a student mid-course, or someone revising years later.
When should you use the CSS Flexbox poster?
Decide the direction first. Every other property means something different once it flips. A wall chart earns its place by being glanceable from where the work is happening, so CSS Flexbox belongs on the wall where that computing work actually happens, within glancing distance, rather than filed away.
What other posters go with CSS Flexbox?
Accessibility, ARIA and How a Browser Renders sit alongside CSS Flexbox in the Computing section. Printed together they make a wall rather than a single sheet, which is how a reference set actually gets used.AccessibilityARIAHow a Browser Renders
Is the CSS Flexbox poster free to download and print?
Yes. CSS Flexbox downloads as a free PDF with no account, no email and no watermark, like everything else in the Computing section. Print as many copies as you like for a home, a classroom, a library or a tutoring group; reselling the file is the only thing the licence rules out.Read the licence
What size does the CSS Flexbox poster print at?
CSS Flexbox is a vector PDF laid out for US Letter, and prints on A4 with Fit to page — the same file, no separate download. Because every mark on it is drawn rather than photographed, it stays sharp enlarged to A3, A2 or A1 at a copy shop. Colour carries emphasis only, so a greyscale print of CSS Flexbox loses nothing.Printing guide

Related posters

Charts that sit alongside CSS Flexbox on the same wall.

Browse every Computing poster, or start from the full catalogue.