What The 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!

Who is Wes Bos?

Wes Bos is a fullstack developer and educator from Hamilton, Canada. Wes loves to break down complex topics into short, tasty, little tutorials. He has contributed to Smashing Magazine, CSS Tricks and NetMag as well as released React For Beginners, Sublime Text Power User and Command Line Power User.

What will you build?

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

Some nice things people have said

Just finished the excellent https://t.co/wlRIDd3IQf videos by @wesbos. If you hate CSS float hacks you will love FlexBox. Thanks Wes!
— Chris Sears (@csears) January 20, 2016

Just finished What The Flexbox. Even if you already know flexbox, watch and you'll know it better. Thanks @wesbos! http://t.co/PkZ8qbSFAZ
— Chris Coleman (@freshyill) October 3, 2015

Thanks @wesbos for creating an amazing + free #flexbox tutorial! I went through it in one night + totally get it: http://t.co/NFoetljedk
— Moya (@moyamiller) September 29, 2015

For any Front End Dev FlexBox mastery is a must. Do yourself a favor & check out http://t.co/6D179vXY2W from @wesbos #css #webdevelopment
— Mike Lawrence (@MikeTLawrence) September 23, 2015

What TheFlexBox?!

What is this?

Who is Wes Bos?

What will you build?

The Videos

Some nice things people have said

What is this?

Who is Wes Bos?

What will you build?

The Videos

Introduction to What The FlexBox

Introduction to Flexbox

Working with Flexbox flex-direction

Wrapping elements with Flexbox

Flexbox Ordering

Flexbox Alignment and Centering with justify-content

Alignment and Centering with align-items

Alignment and Centering with align-content

Alignment and Centering with align-self

Understanding Flexbox sizing with the flex property

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

How Flexbox's flex-basis and wrapping work together

Cross Browser Flexbox Support and Autoprefixer!

Pure Flexbox navigation code along

Mobile content reordering with Flexbox

Nesting Flexbox for vertical and horizontal centering with Flexbox

Flexbox Pricing Grid

Flexbox Equal height columns and leftover elements

Flexbox single line form

Create a mobile app layout with Flexbox

Some nice things people have said