CSS Flexbox Layout Course: Free Online Course from Treehouse

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

CSS Flexbox Layout Course

Understanding Flexbox

Introducing Flexbox

Flexbox Basics and Terminology

Flexbox Basics Review

Creating a Flex Container

Flex Container Challenge

Flexbox Properties

Controlling the Direction of Flex Items

Wrapping Flex Items

Distributing Space Inside a Flex Container

Changing the Order of Flex Items

Wrapping Items and Distributing Space

Growing Flex Items

Smarter Layouts with flex-basis and flex

Aligning Flex Items on the Cross Axis

Growing and Aligning Flex Items

Vertical and Horizontal Centering

Flexbox Properties Review

Building a Layout with Flexbox

Building a Navigation Bar with Flexbox

Creating a Two Column Layout with Flexbox

Creating a Three Column Layout with Flexbox

Aligning Items to the Bottom of a Column

Creating a Sticky Footer with Flexbox

Building a Layout with Flexbox

Flexbox Columns Challenge

Accounting for Mergers and Acquisitions: Foundations

Advanced Topics in Derivative Pricing

Assisting Public Sector Decision Makers With Policy Analysis

Creating and Capturing Mixed Reality

Docker. Basics

Natural Language Processing and Capstone Assignment