Up and Running with Flexbox

Flexbox is one of the biggest changes to how we build web page layouts. It's sturdy and native. It has broad modern browser support. It's the perfect tool for replacing float-based layouts that are easier to code and maintain. In this course you'll experience a concise way to learn how to use Flexbox on your next project.

Start Course
Ryan Irelan

I am the creator of CraftQuest, a web developer, and former software team manager. I spend most of my time improving CraftQuest with code and courses. When I'm not in front of the computer, I spend my time with my family, and running on the roads and trails of Austin, TX.

Up and Running with Flexbox is made up of the following videos:

1 Introduction A short introduction to the course to set the agenda before we get started with Flexbox fun! 02:30
2 What We're Building For this course we are going to build a product listing page for the fictional used shoe website called “On the Run Again.” 02:30
3 What is Flexbox? Now that we have our project ready to go, we need to get a bit more familiar with Flexbox. Let’s pause for a moment and dig into the fundamentals of Flexbox. 04:00
4 The Flex Container We’re ready to go back to the “On the Run Again” page and start the process of adapting it to use Flexbox instead of floats. 17:06
5 The Flex Items With the Flex Container set, it's time to focus on the Flex Items--the elements inside the Flex Container. 08:11
6 Nested Flex Containers Did you know you can nest Flex Containers? it's a great way to gain more control over your layout. 14:14
7 Growing Items using flex-grow flex-grow allows us to give Flex Items instructions on how they should grow if there's available space in the Flex Container. 03:42
8 Overriding Source Order One nice feature of Flexbox is that you can reorder content regardless of source order. Two thumbs up to that! 09:02
9 Flexbox Shorthand We've written longhand properties up to this point. It's good we did (because it's better for learning) but we should learn the shorthand, too, for cleaner code. 04:33
10 Wrapping Up We did it! Now let's review what we learned and celebrate our achievement of turning the float layout to Flexbox. 01:32