Master CSS Flexbox
Every flexbox property taught through interactive coding lessons you complete in the browser, ending with a combined challenge that uses them all.
Flexbox is the layout tool you will reach for every single day as a developer, and it is also the one most people learn by trial and error, mashing properties until the div moves. That works until it doesn't, usually in an interview or a code review.
This course replaces the guessing with an interactive drill-through of the whole system. Each lesson runs in the browser: you write the CSS, the lesson checks the live result. You work through the fundamentals (display flex, flex-direction, flex-wrap, flex-flow), then alignment (justify-content, align-items, align-content), spacing with gap, and the item-level properties that most tutorials skip: order, flex-grow, flex-shrink, flex-basis, the flex shorthand, and align-self.
It ends with a combined challenge that uses everything at once, which is the honest test: any single flexbox property is easy, and real layouts are never a single property.
When you are ready to pair flexbox with grid, the advanced flexbox and CSS grid course picks up from here, and CSS Basics is the step before this one if selectors still feel shaky.
What you'll learn
- ✓ Create flex containers with display flex, flex-direction, flex-wrap, and the flex-flow shorthand
- ✓ Align anything with justify-content, align-items, and align-content
- ✓ Control spacing cleanly with gap for rows and columns
- ✓ Master item-level properties, including order, flex-grow, flex-shrink, flex-basis, and align-self
- ✓ Combine everything in a final flexbox challenge
Course Curriculum
5 sections · 15 lessons
1
Flexbox Fundamentals
4 lessons
- display: flex
- flex-direction
- flex-wrap
- flex-flow (shorthand)
2
Flexbox Alignment
3 lessons
- justify-content
- align-items
- align-content
3
Flexbox Spacing
1 lesson
- gap (row and column spacing)
4
Flexbox Item Properties
6 lessons
- order
- flex-grow
- flex-shrink
- flex-basis
- flex (shorthand)
- align-self
5
Flexbox Mastery
1 lesson
- Combined Flexbox Challenge
Before you start
- ✓ Basic HTML and CSS; if you can write a selector, you are ready
Frequently asked questions
How do the interactive lessons work? +
Does it cover the flex shorthand properties? +
Is flexbox still worth learning with CSS Grid around? +
Do I get a certificate? +
More courses you might like
Text Editors
Before you write a single line of HTML, CSS, or JavaScript — you need to understand your tools. In this cours...
Terminal For Developers
The Terminal for Developers course teaches you how to take control of your computer like a pro. If you’ve ever...
Debugging Like A Pro
Nobody teaches debugging. Think about that. It is half the job, the literal daily reality of writing software,...
Email Developer Course: Build Bulletproof HTML Emails
The first time one of my emails hit Outlook, the layout I had spent two days on turned into a single crooked c...
Projects To Build For Portfolio Web Administrator
Applying to web administrator jobs with no portfolio means asking a hiring manager to take your word for it. T...
JavaScript Zero To Pro
Most people fail at JavaScript politely. They watch someone else code, nod along, understand every line in the...
