Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Scrimba

Learn Flexbox

via Scrimba

Overview

This tutorial teaches you CSS Flexbox through 12 interactive screencasts. You'll learn all the key concepts in addition to building a responsive navbar and a neat image grid.
  • Flexbox Basics
  • Main axis
  • Cross axis
  • Justify content
  • Positioning items
  • The flex property
  • Align items
  • Flex direction
  • Wrapping
  • Flex grow, shrink, basis
  • Order
  • Creating Navbar
  • Creating image grid

Syllabus

  • Learn Flexbox
    • 1. Your first Flexbox layout - Flexbox tutorial
    • 2. Main axis and cross axis - Flexbox tutorial
    • 3. Frontend Career Path
    • 4. Justify Content - Flexbox tutorial
    • 5. Positioning items - Flexbox tutorial
    • 6. The flex property - Flexbox tutorial
    • 7. Align items - Flexbox tutorial
    • 8. Flex direction column - Flexbox tutorial
    • 9. Wrapping - Flexbox tutorial
    • 10. Flex grow, shrink, basis - Flexbox tutorial
    • 11. Order - Flexbox tutorial
    • 12. Bonus: Responsive Navbar - Flexbox tutorial
    • 13. Bonus: Creating a Flexbox image grid - Flexbox tutorial
    • 14. Congrats & next steps!

Reviews

Start your review of Learn Flexbox

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.