Learn Flexbox

Unlock Course Get started!

Join 36174 other students

Log in to get

Access to all our free courses

Interactive hands-on content

100s of code challenges

Join a friendly community

Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

Subscription includes

All courses, bootcamps, paths

100s of coding challenges

Certificates of completion

Exclusive Pro members chat

with Per Harald Borgen

Course level: Intermediate

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.

What's inside

This course contains 14 interactive screencasts

Learn Flexbox

14 lessons 52 min

1. Your first Flexbox layout - Flexbox tutorial

2. Main axis and cross axis - Flexbox tutorial

3. Frontend Career Path

4. Justify Content - Flexbox tutorial

5. Positioning items - Flexbox tutorial

6. The flex property - Flexbox tutorial

7. Align items - Flexbox tutorial

8. Flex direction column - Flexbox tutorial

9. Wrapping - Flexbox tutorial

10. Flex grow, shrink, basis - Flexbox tutorial

11. Order - Flexbox tutorial

12. Bonus: Responsive Navbar - Flexbox tutorial

13. Bonus: Creating a Flexbox image grid - Flexbox tutorial

14. Congrats & next steps!

You'll learn

Flexbox Basics

Main axis

Cross axis

Justify content

Positioning items

The flex property

Align items

Flex direction

Wrapping

Flex grow, shrink, basis

Order

Creating Navbar

Creating image grid

Prerequisites

Before taking this course, you should have a basic understanding of HTML and CSS. Here’s our suggested resource to get you up to speed.

Learn HTML and CSS

105 lessons | 5 hours 33 min

with Per Harald Borgen

Per Harald Borgen

Meet your teacher

The course creator

Per Harald Borgen

Front-end developer and co-founder of Scrimba. Per loves helping other people learn new skills so that they can improve their lives. He makes his tutorials as simple as humanly possible, and focus on getting the students to the point where they can start building projects on their own.

Follow me on twitter

Why this course rocks

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. You can follow the course creator Per Harald Borgen on Twitter here.

Join the Scrimba community chat

Learning alone can be lonely. Click here to join our Discord server and connect with other Scrimba learners!

F to the A oracle

to the Q

When should I use Flexbox?

Flexbox has many uses, including scaling, vertically and horizontally aligning, re-ordering elements within a container, or changing the direction of a column or a row.

Will Flexbox help me with responsiveness?

Absolutely! If you wish to learn how to make fully responsive sites, Flexbox is one aspect you should learn about.

Is Flexbox better than Bootstrap?

Flexbox is simpler and more responsive than Bootstrap. In our book, that's a win for Team Flexbox!

Should I use CSS Grid or Flexbox?

Flexbox is best for one-dimensional layouts and Grid is best for two-dimensional layouts. If you’re laying out items in one direction (for example three buttons inside a header), then you should use Flexbox. This will give you more flexibility than CSS Grid, be easier to maintain, and require less code. However, if you’re going to create an entire layout in two dimensions — with both rows and columns — then it's time for CSS Grid.