HTML/CSS

Cracking the Case With Flexbox

​Follow the clues behind each property of Flexbox and learn how to make modern layouts that are flexible across different screen sizes.

Enroll Now to Play

Course Overview

  1. Level 1 on Cracking the Case With Flexbox

    Level 1 Free Level 2 Videos | 6 Challenges
    Foreshadowing Flexbox

    Learn how to analyze the new display property, containers, lines, and items.

  2. Level 2 on Cracking the Case With Flexbox

    Level 2 2 Videos | 6 Challenges
    Justification and Order

    Explore how to align items, distribute space, and change order along the master axis.

  3. Level 3 on Cracking the Case With Flexbox

    Level 3 1 Video | 3 Challenges
    Aligning Alibis

    Straighten out the facts and learn how to align items and distribute space along the cross axis.

  4. Level 4 on Cracking the Case With Flexbox

    Level 4 2 Videos | 6 Challenges
    Sizing Up the Properties

    Shape up by growing, shrinking, and declaring sizes of items.

  5. Level 5 on Cracking the Case With Flexbox

    Level 5 2 Videos | 6 Challenges
    Property Plotting

    Discover how to align content in edge cases and group multiple properties.

Cracking the Case With Flexbox

Complete these levels to unlock

Course Completion Badge

​Follow the clues behind each property of Flexbox and learn how to make modern layouts that are flexible across different screen sizes.

Supplemental Learning

About The Professor

From framesets in table-based layouts to modular CSS architecture, Dan loves front-end design and development. Mostly, though, he enjoys learning and meeting the wonderful people in the design and dev communities.

View Full Credits