What The Flexbox?! — A simple 20 video course that will help you master CSS Flexbox

What TheFlexBox?!

A simple, free 20 video course that will help you master CSS Flexbox!

What is this?

The first 13 videos are aimed at understanding the fundamentals of Flexbox - we will take a deep dive into understanding rows, columns, axes, wrapping, alignment, centering and layout. The last 7 are code alongs where we will build everything from a navigation to a mobile app layout entirely with Flexbox!

Wes Bos

Meet Wes Bos

Wes Bos is a Full Stack Developer, Speaker and Teacher from Canada. He is a course creator, works as an independent web developer and is the co-host of Syntax - a popular web development podcast. Wes has taught over 500 students in 200+ classes and spoken at dozens of conferences around the world. Wes wrote his own bio in the third person for some reason.

Wes is the author of React For Beginners, Advanced React and GraphQL, ES6 for Everyone and Learn Node which together have sold over 55,000 copies. He is also the author of JavaScript30.com, CSSGrid.io, Flexbox.io and Command Line Power User, a set of free video series. 300,000 people have taken at least one of Wes' free video courses.

What will you build?

Here are just a few things you will build entirely with Flexbox

A mobile app layout
A mobile app layout
A Flexbox Pricing Grid
A Flexbox Pricing Grid
An inline booking form
An inline booking form

The Videos

  • Introduction to What The FlexBox

    Introduction to What The FlexBox

    1
  • Introduction to Flexbox

    Introduction to Flexbox

    2
  • Working with Flexbox flex-direction

    Working with Flexbox flex-direction

    3
  • Wrapping elements with Flexbox

    Wrapping elements with Flexbox

    4
  • Flexbox Ordering

    Flexbox Ordering

    5
  • Flexbox Alignment and Centering with justify-content

    Flexbox Alignment and Centering with justify-content

    6
  • Alignment and Centering with align-items

    Alignment and Centering with align-items

    7
  • Alignment and Centering with align-content

    Alignment and Centering with align-content

    8
  • Alignment and Centering with align-self

    Alignment and Centering with align-self

    9
  • Understanding Flexbox sizing with the flex property

    Understanding Flexbox sizing with the flex property

    10
  • Finally understanding Flexbox flex-grow, flex-shrink and flex-basis

    Finally understanding Flexbox flex-grow, flex-shrink and flex-basis

    11
  • How Flexbox's flex-basis and wrapping work together

    How Flexbox's flex-basis and wrapping work together

    12
  • Cross Browser Flexbox Support and Autoprefixer!

    Cross Browser Flexbox Support and Autoprefixer!

    13
  • Pure Flexbox navigation code along

    Pure Flexbox navigation code along

    14
  • Mobile content reordering with Flexbox

    Mobile content reordering with Flexbox

    15
  • Nesting Flexbox for vertical and horizontal centering with Flexbox

    Nesting Flexbox for vertical and horizontal centering with Flexbox

    16
  • Flexbox Pricing Grid

    Flexbox Pricing Grid

    17
  • Flexbox Equal height columns and leftover elements

    Flexbox Equal height columns and leftover elements

    18
  • Flexbox single line form

    Flexbox single line form

    19
  • Create a mobile app layout with Flexbox

    Create a mobile app layout with Flexbox

    20

Some nice things people have said