In this activity, you'll master CSS Flexbox by helping frogs reach their lily pads! You'll learn how to:
- Use
justify-content to align items horizontally
- Apply
align-items to position items vertically
- Change layout direction with
flex-direction
- Control item wrapping with
flex-wrap
To apply concepts of CSS Flexbox through an interactive activity.
In this activity, you will learn and practice CSS Flexbox by playing Flexbox Froggy, a fun game where you guide a frog to its lilypad using CSS code.
⏱️ Estimated time: 30-45 minutes
Check that you have:
- Open your web browser
- Navigate to the Flexbox Froggy game: Flexbox Froggy Activity
- Wait for the game to load - you should see a pond with frogs and lily pads
- Start with Level 1 - read the instructions on the right side
- Type your CSS code in the code editor
- Press Enter or click "Next" to see if your code works
- Complete at least Level 18 of the game
- Pay close attention to these CSS properties as you progress:
justify-contentalign-itemsflex-directionflex-wrap
tip Getting Stuck?
If you're stuck on a level:
- Re-read the level instructions carefully
- Try different values for the properties
- Review the properties list below for hints
- Remember that some levels combine multiple properties!
- Observe how each property works - watch how the frogs move
- Notice the relationship between main axis and cross axis
- Try to predict what will happen before pressing Enter
- Make connections to real website layouts you've seen
- When you complete Level 18, take a screenshot
- Include the level number and your code in the screenshot
- Save the screenshot with a clear filename like "FlexboxFroggy_Level18_YourName.png"
ℹ️ Info Submission Required
You'll need to submit your Level 18 screenshot as proof of completion. Make sure your screenshot clearly shows:
- The level number (18)
- Your CSS code
- The successful completion message
Controls alignment along the main axis (horizontal by default):
flex-start - Items align to the startflex-end - Items align to the endcenter - Items align to the centerspace-between - Items spread out with space betweenspace-around - Items have equal space around themspace-evenly - Items have equal space between them
Controls alignment along the cross axis (vertical by default):
flex-start - Items align to the startflex-end - Items align to the endcenter - Items align to the centerstretch - Items stretch to fill containerbaseline - Items align to their baseline
Controls the direction of the main axis:
row - Horizontal direction (default)row-reverse - Horizontal, reversedcolumn - Vertical directioncolumn-reverse - Vertical, reversed
Controls whether items wrap to new lines:
nowrap - Items stay on one line (default)wrap - Items wrap to new lineswrap-reverse - Items wrap in reverse order
- Read the instructions carefully for each level
- Experiment with different property values to see their effects
- Take your time to understand each concept before moving on
- Don't rush - focus on learning rather than just completing levels
- Pay attention to how the frog moves with each CSS property
- Review previous levels if you need to remember specific properties
- Take notes on properties that you find particularly useful
tip Pro Tips
- If a level seems impossible, you might need to combine multiple properties
- The order of your CSS declarations doesn't matter
- Some levels have multiple correct solutions
- Use the hint button if you're really stuck!
After completing Level 18, you should be comfortable with:
- ✅ Basic flexbox container properties
- ✅ Aligning items in both horizontal and vertical directions
- ✅ Changing flex direction for different layouts
- ✅ Understanding the relationship between main and cross axes
- ✅ Applying flexbox to solve real-world layout problems
- Check your internet connection
- Try refreshing the page (F5 or Ctrl+R)
- Try a different web browser
- Clear your browser cache
- Make sure you're typing in the correct CSS syntax
- Check for typos in property names
- Ensure you're using the right property values
- Remember to press Enter after typing your code
- Review the property definitions above
- Try combining properties you've learned
- Think about which axis you need to affect
- Don't forget about
flex-wrap for multi-line layouts
Note: This activity is designed to provide hands-on experience with CSS Flexbox. The concepts learned here are fundamental for modern web layout design and will be essential for creating responsive, flexible web layouts in your future projects.
Flexbox is one of the most important CSS layout tools used by professional web developers, and mastering it will significantly improve your ability to create sophisticated web designs.
⚠️ Remember
Complete at least up to Level 18 and take a screenshot for submission!
🐸 Ready to guide the frog home? Click the link above and start your Flexbox Froggy adventure!
Submit your screenshot here