HTML and CSS lesson 16: Flexbox: spacing and lining up

US version. US grades and US spelling. · UK version of this lesson

justify-content shares out spare space along the row (center, flex-end, space-between…); align-items lines items up across it; flex-grow lets an item take the spare space. A complete 40-minute HTML and CSS lesson for beginners (Grades 6–7), from Unit 5: Boxes and layout. You build real web pages right here in your browser – nothing to install.

Time: 40 minutes + 20 min homework
Grade: Grades 6–7 (ages 11–12)
You need: A computer or tablet, paper and a pencil
Graded: Instantly, with explanations

For parents: how to use this lesson

You don't need to know HTML yourself. The lesson explains each step on screen, the way Mr Babbage, our Head of Computing, likes it: a worked example first, then a go for your child. When your child builds a page, the browser draws it straight away and Classfern grades it with a checklist.

Read what your child will learn together.
Press Start the lesson below. Sit with your child for the teaching and the worked example (about 15 minutes): ask them to point at each tag and say what it does.
Let them do the practice on their own. If a page doesn't look right, the checklist says what is missing – let them find the mistake before you help.
Finish with the exit questions and the talk question: “Explain to a partner how to work out where a box starts with `justify-content: center`.”
Later that day or the next day: the homework (20 minutes), then a practice test.

Watch out for

align-items spreads items along the row. That is justify-content; align-items works across.
space-between leaves space at the edges. Only between the boxes.

Miss Lovelace's tip for home: ask your child to change one thing on their page – a word, a color, a size – and predict what will happen before they look. Predicting first is how programmers learn fastest.

What your child will learn

Learning goal: spread items out with justify-content.

Success looks like

I can spread items out with justify-content.
I can line items up with align-items.
I can work out where each box will be.

Key words

justify-content · align-items · spare space · space-between · flex-grow · main axis · cross axis

What to have ready

A device with a web browser (pages are built and checked right in the browser – nothing to install)
Paper for planning and sketching
A keyboard helps for typing code (a tablet works too)

The big ideas (for the adult)

When boxes don't fill the row, there is spare space. justify-content decides where it goes: flex-start (boxes at the start, spare space at the end – the normal setting), center (half each side), flex-end (all before the first box), space-between (first box at the left edge, last at the right, equal gaps between), space-around and space-evenly.

You can work it out with arithmetic: spare space = row width − the widths of the boxes − the gaps. For center, the first box starts at half the spare space.

align-items works across the row (up and down): center puts boxes halfway down, flex-end at the bottom, stretch (the normal setting) makes them as tall as the row. flex-grow: 1; lets a box grow to take up spare space. Remember: center, not centre – and there is no middle.

Worked example: spread out

CSS:

.row { display: flex; width: 400px; height: 80px; justify-content: space-between; align-items: center; }
.row div { width: 60px; height: 40px; background-color: teal; }

HTML:

<div class="row">
<div></div>
<div></div>
<div></div>
</div>

The lesson, step by step

40 minutes in 5 parts
Part	Time	How it is checked
Starter	5 min	Graded by Classfern
Learn	8 min	Read, watch and talk
See it	7 min	Graded by Classfern
Practice	15 min	Graded by Classfern
Check and reflect	5 min	Graded by Classfern + self-check

The lesson

It runs here on the page. No sign-up and no names – nothing you type is sent anywhere. Each visit picks a new mix of questions.

Homework

20 minutes: predict what the browser will do, build or fix a short page, and check the key ideas – then a short reflection. New questions every time, all graded instantly.

Practice tests

All computer science practice tests · All 20 HTML and CSS lessons

Curriculum

CSTA K–12 Computer Science Standards (2017), grades 6–8: 2-AP-17 – Systematically test and refine programs using a range of test cases.

The standard codes are CSTA's; the descriptions are our own words.

Our lessons and questions are our own. They are not written or endorsed by any government department, testing agency or exam board. HTML and CSS are open web standards; Classfern is not affiliated with the organisations that publish them.