Video Course

Up and Running with Flexbox

by Ryan Irelan

A hands-on, practical guide to getting started with Flexbox. Convert a product listing from float to Flexbox. Read the full description


Get immediate access to the course.
Secure checkout.

Start Watching for Free

What's in this Course?

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.

During the video course, Ryan will walk you through converting a sample project from float to Flexbox. Along the way, we’ll learn the following:

  • what Flexbox is and how it works
  • the Flexbox layout model: what the axes are and how they function and change
  • the fundamentals of the Flexbox Container and the Flex Items
  • how to override the source order and some Flexbox properties
  • the Flexbox shorthand properties vs. the longhand properties and a smart approach to using them
  • how to successfully implement Flexbox to replace a float-based layout.

Flexbox is a short name for Flexible Box Layout, which is a specification from the CSS3 Working Group(fn) that gives web developers more control over positioning of elements inside a parent container. It was created as an easier, faster, and more reliable way to handle precise layouts.

Right from the spec itself, Flexbox is a set of:

simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need.

We can use Flexbox to arrange elements in a container (called the Flex Container) without using floats or other methods we’re used to. It’s a powerful new tool and Ryan put together a concise way to learn how to use it on your next project.


What is the difficulty level?


This is a practical introduction to Flexbox. You should be familiar with CSS and HTML in order to follow along. It's perfect for you if you already do front-end coding but want to get familiar with Flexbox.

How long is the course?

The course is 65 minutes long and broken up into 10 different videos.

Is there a written version of the course, too?

You can download the course workbook (in PDF, HTML, and ePUB formats), which has similar content as what is covered in the videos. The videos, however, should be the primary learning source.

What if I have a suggestion?

We love feedback about our training materials. Please get in touch and let us know what you think.

Get in touch