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:

1IntroductionA short introduction to the course to set the agenda before we get started with Flexbox fun! 02:30
2What We're BuildingFor this course we are going to build a product listing page for the fictional used shoe website called “On the Run Again.” 02:30
3What 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
4The Flex ContainerWe’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
5The Flex ItemsWith the Flex Container set, it's time to focus on the Flex Items--the elements inside the Flex Container. 08:11
6Nested Flex ContainersDid you know you can nest Flex Containers? it's a great way to gain more control over your layout. 14:14
7Growing Items using flex-growflex-grow allows us to give Flex Items instructions on how they should grow if there's available space in the Flex Container. 03:42
8Overriding Source OrderOne nice feature of Flexbox is that you can reorder content regardless of source order. Two thumbs up to that! 09:02
9Flexbox ShorthandWe'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
10Wrapping UpWe did it! Now let's review what we learned and celebrate our achievement of turning the float layout to Flexbox. 01:32