Find the perfect coding resourcesLearn more

Learn Flexbox

ScrimbaScrimba
Recommended
Meet Your Instructor
Per Borgen avatar

Per Borgen

Instructor

Developer, teacher, and co-founder of Scrimba. I love teaching people how to code and helping them break into the tech industry. Based in Oslo, Norway.

52min

Completion

Certificate included

Format

Interactive coding

Free

What You'll Learn

Create a basic layout using Flexbox

Understand main axis and cross axis in Flexbox layout

Use justify-content property to position items along the main axis

Control the size of Flexbox items with the flex property

Apply align-items property to position items along the cross axis

Overview

This tutorial teaches you CSS Flexbox through 12 interactive screencasts. You'll learn all the key concepts in addition to building a responsive navbar and a neat image grid. Once you've learned CSS Flexbox, you'll wonder how you ever managed to build websites without it. It gives you all the tools you needed in order to properly arrange content inside flexible containers. Given that all websites need to be flexible and responsive these days, Flexbox is a must-have skill for web developers. Course content - This course is focused on getting you up to speed as quickly as possible. Even if you only watch the first lectures, you'll be able to take advantage of your new skills in your next project. I'll give you several exercises throughout the course, so that you'll be able to get your hands dirty as well. We'll use a navbar as an example layout, as that's a very typical use case for Flexbox. In the bonus screencasts, we'll tie everything together and build two real-world examples: an awesome image grid and a fully responsive navbar.

Table of Contents
1
Your first Flexbox layout - Flexbox tutorial
2
Main axis and cross axis - Flexbox tutorial
3
Justify Content - Flexbox tutorial
4
Positioning items - Flexbox tutorial
5
The flex property - Flexbox tutorial
6
Align items - Flexbox tutorial
7
Flex direction column - Flexbox tutorial
8
Wrapping - Flexbox tutorial
9
Flex grow, shrink, basis - Flexbox tutorial
10
Order - Flexbox tutorial
11
Bonus: Responsive Navbar - Flexbox tutorial
12
Bonus: Creating a Flexbox image grid - Flexbox tutorial
13
Congrats & next steps!
14
How to Utilize Your Certificate

Share Your Experience

Sign in to leave a review and help others

No reviews yet. Be the first to review!