Up and Running with Flexbox

The Flex Items

With the Flex Container set, it's time to focus on the Flex Items--the elements inside the Flex Container.

Here are all of the videos in Up and Running with Flexbox:

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

Dozens of Courses Are Waiting

Invest in yourself, your career, and your ability to take knowledge and use it grow your business or earning potential.

Get everything in the catalog plus new videos every week. Just by signing up you get immediate access to hundreds of hours of learning.

Start CraftQuest

Image