2015
Treehouse
Guil Hernandez
1:10
English

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
Introducing Flexbox
Flexbox Basics and Terminology
Flexbox Basics Review - 6 questions
Creating a Flex Container
Flex Container Challenge - 1 objective
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 - 3 objectives
Growing Flex Items
Smarter Layouts with flex-basis and flex
Aligning Flex Items on the Cross Axis
Growing and Aligning Flex Items - 3 objectives
Vertical and Horizontal Centering
Flexbox Properties Review - 6 questions
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 - 5 questions
Flexbox Columns Challenge - 2 objectives

teamtreehouse.com/library/css-flexbox-layout

Download File Size:152.31 MB

---