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:
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.
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.
The course is 65 minutes long and broken up into 10 different videos.
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.
We love feedback about our training materials. Please get in touch and let us know what you think.