A CSS Flexbox Menu

A CSS Flexbox Menu
A CSS Flexbox Menu
A CSS Flexbox Menuplay
A CSS Flexbox Menu
A CSS Flexbox Menu
A CSS Flexbox Menu
A CSS Flexbox Menu
A CSS Flexbox Menu
Common Core Standards
Product Rating
File Type

Compressed Zip File

Be sure that you have an application to open this file type before downloading and/or purchasing.

7 MB|30 pages
Also included in:
  1. Web For Business - Bundle 3 CSSThe Web For Business Course - Students learn programming skills while developing their own resumé website.This bundle includes learning/assessment activities teaching students how to style their web pages using CSS (Cascading Style Sheets).The bundle includes:Five inte
    Save $3.48
Product Description

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.


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:

  • 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.

    Total Pages
    30 pages
    Answer Key
    Teaching Duration
    1 hour
    Report this Resource
    Digital Download
    More products from Web Explorations
    Product Thumbnail
    Product Thumbnail
    Product Thumbnail
    Product Thumbnail
    Product Thumbnail
    Teachers Pay Teachers

    Teachers Pay Teachers is an online marketplace where teachers buy and sell original educational materials.

    Learn More

    Keep in Touch!

    Sign Up