CSS Flexbox Layout

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.

  • Introducing Flexbox2:42
  • Flexbox Basics and Terminology2:20
  • Flexbox Basics Review6 questions
  • Creating a Flex Container4:50
  • Flex Container Challenge1 objective

Flexbox Properties

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

  • Controlling the Direction of Flex Items3:47
  • Wrapping Flex Items2:33
  • Distributing Space Inside a Flex Container5:55
  • Changing the Order of Flex Items5:32
  • Wrapping Items and Distributing Space3 objectives
  • Growing Flex Items3:42
  • Smarter Layouts with flex-basis and flex6:42
  • Aligning Flex Items on the Cross Axis3:43
  • Growing and Aligning Flex Items3 objectives
  • Vertical and Horizontal Centering4:14
  • Flexbox Properties Review6 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.

  • Building a Navigation Bar with Flexbox7:32
  • Creating a Two Column Layout with Flexbox2:36
  • Creating a Three Column Layout with Flexbox5:24
  • Aligning Items to the Bottom of a Column4:13
  • Creating a Sticky Footer with Flexbox4:58
  • Building a Layout with Flexbox5 questions
  • Flexbox Columns Challenge2 objectives

results matching ""

    No results matching ""