CSS Flexbox Layout Course (How To)

Flexbox is a set of CSS properties that give you a flexible way to lay out content. With flexbox you can change the direction, alignment, size and order of elements, regardless of their original size and order in the HTML. You can even stretch and shrink elements and distribute space, all with just a few lines of CSS!

Understanding Flexbox

Before you begin using flexbox in your layouts, you should understand the terminology and concepts behind flexbox.

Chevron 5 steps

• Introducing Flexbox

  2:42

• Flexbox Basics and Terminology

  2:20

• Flexbox Basics Review

  6 questions

• Creating a Flex Container

  4:50

• Flex Container Challenge

  1 objective

Flexbox Properties

Learn advanced flexbox properties for layout direction, order, alignment, sizing and more.

Chevron 11 steps

• Controlling the Direction of Flex Items

  3:47

• Wrapping Flex Items

  2:33

• Distributing Space Inside a Flex Container

  5:55

• Changing the Order of Flex Items

  5:32

• Wrapping Items and Distributing Space

  3 objectives

• Growing Flex Items

  3:42

• Smarter Layouts with flex-basis and flex

  6:42

• Aligning Flex Items on the Cross Axis

  3:43

• Growing and Aligning Flex Items

  3 objectives

• Vertical and Horizontal Centering

  4:14

• Flexbox Properties Review

  6 questions

Building a Layout with Flexbox

It's time to put those new flexbox skills into practice! In this section, you're going to use flexbox to build the layout for a simple web page.

Chevron 7 steps

• Building a Navigation Bar with Flexbox

  7:32

• Creating a Two Column Layout with Flexbox

  2:36

• Creating a Three Column Layout with Flexbox

  5:24

• Aligning Items to the Bottom of a Column

  4:13

• Creating a Sticky Footer with Flexbox

  4:58

• Building a Layout with Flexbox

  5 questions

• Flexbox Columns Challenge

  2 objectives