Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Treehouse

CSS Flexbox Layout Course (How To)

via Treehouse

Overview

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!

Syllabus

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

Taught by

Guil Hernandez

Reviews

Start your review of CSS Flexbox Layout Course (How To)

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.