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
- 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: Use CSS to set the main container so it displays objects inside of it using Flexbox.Use flex-wrap in the main container to control how the internal objects wrap.Use the flex-flow shortcut in the main container to specify both flex-wrap and flex-direction.Use justify-content in the main container to space the objects on the main axis (Think: row).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). Use flex-grow on specific inner objects to change the width of that object. 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.