Skills Expanded

CSS: Using Flexbox for Layout

What you'll learn

Follow the clues behind each property of Flexbox and learn how to make modern layouts that are flexible across different screen sizes. This interactive course was formerly known as Cracking the Case With Flexbox on Code School.

Table of contents

Foreshadowing Flexbox

2 Videos • 6 Challenges

Foreshadowing Flexbox Video
Creating Flex Containers Challenge
Starting a Grid Challenge
Creating Inline Flex Containers Challenge
Flexing Form Elements Challenge
Wily Wrapping Video
Wrapping Media Content Challenge
Wrapping Grid Items Challenge

Justification and Order

2 Videos • 6 Challenges

Justice in Justifying Video
Distributing Space Around Challenge
Distributing Space Between Challenge
Justifying Column Content Challenge
Aligning Inline Items Challenge
Order in the Flexbox! Video
Alternating Order Challenge
Order by Class Challenge

Aligning Alibis

1 Video • 3 Challenges

Aligning Alibis Video
Vertically Centering Content Challenge
Aligning in a Page Challenge
Aligning Nested Items Challenge

Sizing Up the Properties

2 Videos • 6 Challenges

Suspect Sizes Video
Growing a Grid Challenge
Flexing Forms Challenge
Avoiding Shrinking Challenge
Withholding Widths Video
Basis Split Challenge
Small Screen Basis Challenge
Large Screen Basis Challenge

Property Plotting

2 Videos • 6 Challenges

Property Plotting Video
Overriding Alignment Challenge
Reverting Alignment Challenge
Aligning Wrapped Items Challenge
Scary Shorthand Video
Refactoring to Flex Challenge
Refactoring From Flex Challenge
Reverse Refactoring Challenge

About the author

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.

See more courses by Dan Denney

Ready to upskill? Get started

Ready to skill up
your entire team?

20

Subscriptions

Continue to checkout Continue to checkout

Cancel

With your Pluralsight plan, you can:

With your 30-day pilot, you can:

Access thousands of videos to develop critical skills
Give up to 50 users access to thousands of video courses
Practice and apply skills with interactive courses and projects
See skills, usage, and trend data for your teams
Prepare for certifications with industry-leading practice exams
Measure proficiency across skills and roles
Align learning to your goals with paths and channels

Ready to skill up
your entire team?

10

Subscriptions

Continue to checkout

Cancel

With your Pluralsight plan, you can:

With your 30-day pilot, you can:

Access thousands of videos to develop critical skills
Give up to 50 users access to thousands of video courses
Practice and apply skills with interactive courses and projects
See skills, usage, and trend data for your teams
Prepare for certifications with industry-leading practice exams
Measure proficiency across skills and roles
Align learning to your goals with paths and channels