BitWithBite
HTML & CSS Worksheet
🎨 Flexbox
SCORE___ / 20
NameClassDate
After this worksheet you can
display:flex basicsjustify-content and align-itemsDirection and wrapgap spacing📚 Quick Recap
Flexbox (Flexible Box Layout) is the CSS superpower that makes alignment and distribution of elements finally predictable. Before Flexbox, centering a div was famously painful. Now? One line: display: flex; align-items: center; justify-content: center. In this lesson you'll learn every key property — parent and child — and build real UI patterns with confidence.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Enable flex layout with:
2Main-axis alignment:
3Cross-axis alignment:
4Space between children:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5Default flex-direction is .
6justify-content: space- spreads items with equal gaps between.
7Perfectly centre a child in its parent.
8Navbar: logo left, links right.
9Row vs column direction?
🚀 Section C · Challenge ● CHALLENGE 5
10Three equal columns with flex.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-A 2-A 3-A 4-A | 5 row 6 between 7 = display:flex; justify-content:center; align-items:center; 8 = display:flex; justify-content:space-between; align-items:center; 9 = row = horizontal main axis; column = vertical | 10 = parent display:flex; children flex:1; add gap