Flexbox basics — HTML and CSS for kids

Code tip

Find the free space — “free space = container − boxes; justify-content decides where it goes”

1. Free space = container width − number of boxes × box width.
2. flex-start: all free space after the last box; flex-end: all before the first box; center: half on each side.
3. space-between: free space ÷ (boxes − 1) between each pair, none at the ends.

Use it for: Making menus, rows of cards and centred buttons.

Worked example: 💪 How much empty space (px) is left after the last box?
.row {
  display: flex;
  width: 190px;
  justify-content: flex-start;
}
Inside are 3 boxes, each 50px wide (no margins). → 40

✏️ Practice

Work it out in your head or on paper, type the answer and press Check. Stuck? Press “Show me how”.

🏁 Lesson 18 test

20 questions. Check each answer, then go to the next one. Get 16 or more right to pass.

🏅 Sign in with Google to earn the 💪 Flexbox Flexer badge when you pass — and a certificate when you finish all 10 lessons of Part 2 · CSS. You can still take the test without signing in.

🖨️ CSS Worksheet: Flexbox Basics

• Worksheet set 1 (PDF)
• Worksheet set 2 (PDF)
• Worksheet set 3 (PDF)