BitWithBite
Full-Stack Worksheet
📏 Flexbox Layout
SCORE___ / 20
NameClassDate
After this worksheet you can
Set up a flex containerUse justify-content/align-itemsControl directionBuild a flex nav bar📚 Quick Recap
🎯 What you'll practice: Flex container and item properties for one-dimensional layouts.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Flexbox is activated with:
2justify-content aligns items along the:
3The default flex-direction is:
4To evenly space items with room at the ends, use:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The property that adds space between flex items without margin hacks is .
6align-items controls alignment along the axis.
7Write CSS for a nav with logo left, links right, vertically centered.
8What does flex: 1 do to a flex item?
9How do you stack flex items vertically instead of horizontally?
🚀 Section C · Challenge ● CHALLENGE 5
10Design a card row: 3 equal-width cards with equal gaps, wrapping to a new line on small screens. Write the container CSS.
💭 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-B 2-B 3-B 4-B | 5 = gap 6 = cross 7 = .nav{display:flex;justify-content:space-between;align-items:center;} 8 = It lets the item grow/shrink to fill available space proportionally relative to sibling flex items 9 = Set flex-direction: column on the container | 10 = .cards{display:flex;flex-wrap:wrap;gap:1rem;} .cards>div{flex:1 1 300px;} — flex-wrap allows wrapping and flex-basis(300px) controls when cards drop to a new line.