Tutorial: CSS Flexbox Menu is an interactive lab that shows the student how to use CSS Flexbox building a simple menu system.

This tutorial is excellent for an in-class lab. It can also be used as an online, self-paced, learning activity.

PREVIEW THE INTERACTIVE DEMO

Lesson Objectives:

• Use CSS Flexbox, unordered lists, and hyperlinks to create a menu system.
• Utilize CSS Flexbox to control the flow of elements inside a block.
• Use flex-wrap to control how items wrap with various screen widths.
• Use the flex-flow shortcut.
• Use justify-content to control how items are positioned on the main axis (row).
• Use align-items to control how items are positioned on the sub axis (column)
• Use flex-grow to control the width of specific items.
  

Tutorial: CSS Flexbox Menu includes several interactive learning activities:

• The full source code solution as well as multiple screenshots showing the student each stage as new code is introduced.
  
• A Parson’s Problem (https://webexplorations.com/2017/12/09/parson-problems/) is included allowing the student’s to clarify code structure by simply clicking and dragging elements in the correct order. (This clarifies learning without having to focus on typing code.)
  
• Several examples are included using CodePen, a free, online editor that displays the results as the code is edited.
  
• A lab with START and FINAL code for your classroom activities.
  

SUGGESTED ACTIVITY FOR THE LAB using the tutorial as a guide:

1. Use CSS to set the main container so it displays objects inside of it using Flexbox.
2. Use flex-wrap in the main container to control how the internal objects wrap.
3. Use the flex-flow shortcut in the main container to specify both flex-wrap and flex-direction.
4. Use justify-content in the main container to space the objects on the main axis (Think: row).
5. Use align-items in the main container to position the internal objects on the cross axis (Think: column —> top of the box, centered, or bottom of the box).
6. Use flex-grow on specific inner objects to change the width of that object.
7. Describe when to use CSS Grid and when to use Flexbox.

This package includes a standard PDF handout for your students as well as an interactive version that you can easily upload to your LMS. Here is a video showing how this is done using Moodle and Canvas.