Learn Flexbox for free

Unlock CourseGet started!

Join 22684 other students

Sign in to get
Access to 30+ free courses
New courses added monthly
Weekly coding challenge
Join a friendly community
Unlock Course
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
New courses monthly
The course creator Per Harald Borgen

with Per Harald Borgen

22684 students enrolled

Course level: Intermediate

This tutorial teaches you CSS Flexbox through 12 interactive screencasts. You'll learn all the key concept in addition to building a responsive navbar and a neat image grid.

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
man

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.

Meet your teacher

The course creator

Per Harald Borgen

Co-founder of Scrimba - the next-generation platform for learning to code. https://scrimba.com

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 flexbile 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 really shines when you need to solve these: scaling, vertically and horizontally aligning, and re-ordering elements within a container, changing direction in a column or a row.

Is Flexbox responsive?

Yes, if you wish to more about responsiveness, Flexbox is one aspect you should learn about.

Is Flexbox better than bootstrap?

For a couple of reasons, flexbox is much better than bootstrap: Bootstrap uses floats to make the grid system, which many would say is not meant for the web, where flex-box does the opposite by staying flexible to the items' size and contents; same difference as using pixels vs em/rem, or like controlling your divs only using margins and padding and never setting a pre-defined size. Bootstrap, because it uses floats, needs clearfix after each row, or you will get misaligned divs of different height. Flex-box doesn't do that and instead checks for the tallest div in the container and sticks to its height.

Should I use CSS Grid or Flexbox?

Flexbox is made for one-dimensional layout and Grid is made for two-dimensional layouts. This means that if you’re laying out items in one direction (for example three buttons inside a header), then you should use Flexbox. It’ll give you more flexibility than CSS Grid. It’ll also 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 you should use CSS Grid

Go Pro!
Built with Imba