- CSS
- Intermediate
About this Course
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.
5 stepsFlexbox Properties
Learn advanced flexbox properties for layout direction, order, alignment, sizing and more.
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.
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
Teacher
-
Guil Hernandez
Guil is a Full Stack JavaScript and Front End Web Development instructor.