Flexbox is a wonderful tool that opens up the world of responsive layouts, but it can be hard to predict exactly what's going to happen when we use it, and it's full of sometimes confusing property and value options.
Flexbox Simplified
4h 41m 57s
English
Paid
Flexbox Simplified is a 70-lesson 4 hours 41 minutes self-paced course by Kevin Powell. Flexbox is a wonderful tool that opens up the world of responsive layouts, but it can be hard to predict exactly what's going to happen when we use it , and it's full of sometimes confusing property and value options.
Course facts
- Lessons
- 70
- Duration
- 4 hours 41 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Kevin Powell
- Price
- Premium
As powerful as flexbox is, it can seem like it has a mind of it's own.
- What to do if the columns are unbalanced?
- Now these ones are balanced, but I need one to be bigger!
- Why are things overflowing all of a sudden?
- Is it align or justify... wait, neither are working?
- What's the deal with growing and shrinking?!
- Centering is supposed to be easy now right? But it doesn't always work!
Going from the very basics, we first break flexbox down, then build up our understanding with practical examples and code challenges .
Set up in a way to help reinforce earlier lessons as we continue to explore new content, this course is set up so that you are feeling confident with creating layouts with flexbox when you are done.
- Lessons that break down how flexbox is working
- Applying what you're learning to realistic examples
- Challenges to reinforce what you're learning
- Code snippets and design patterns you can easily plug 'n play into your projects
- Cheatsheets that you can reference back to
- Access to a private group within my Discord community to get help, show your progress, and ask questions
- All lessons available for download for offline viewing
- Finally understand how to take full control of flexbox and make it work for you
Who teaches Flexbox Simplified? Kevin Powell
Kevin Powell is a Canadian developer and one of the most cited independent voices on modern CSS — running the Kevin Powell YouTube channel, which has anchored a generation of front-end developers' relationship with CSS. He is widely respected for the patience and depth of his explanations of the parts of CSS that the language's reputation as a quirky historical accident often obscures.
The course catalog covers modern CSS in depth: Grid and Flexbox layout, custom properties (CSS variables), modern responsive design (container queries, the dynamic viewport units, modern color spaces), CSS animations and transitions, typography on the web, and the design-system thinking that connects CSS to broader UI work. Material is structured for working developers building real interfaces.
The CourseFlix listing under this source carries 7 Kevin Powell courses spanning that range. Material is paid; Kevin Powell's courses are sold individually on the original platform. Courses are aimed at developers ready to make CSS a deliberate craft rather than an afterthought.
What lessons are included in Flexbox Simplified?
0:00
/ #1: Welcome to the course!
All Course Lessons (70)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Welcome to the course! Demo | 00:47 | |
| 2 | My approach | 05:01 | |
| 3 | The software I'll be using | 03:32 | |
| 4 | The Discord Community | 08:00 | |
| 5 | The file structure | 03:14 | |
| 6 | Introduction to declaring display: flex | 00:50 | |
| 7 | The flex container | 03:08 | |
| 8 | The flex items - part 1 | 02:10 | |
| 9 | The flex items - part 2 | 03:46 | |
| 10 | The flex items - part 3 | 04:46 | |
| 11 | The flex items - part 4 | 03:57 | |
| 12 | A challenge | 01:47 | |
| 13 | Introduction to flexing our muscles | 00:46 | |
| 14 | flex-direction basics | 03:38 | |
| 15 | Collapsing margins | 04:23 | |
| 16 | flex-direction - part 2 | 11:08 | |
| 17 | The order property | 04:10 | |
| 18 | flex-grow | 04:31 | |
| 19 | flex-shrink | 03:38 | |
| 20 | Grow & Shrink Challenge | 03:33 | |
| 21 | Grow & Shrink Solution | 07:38 | |
| 22 | Another challenge | 01:59 | |
| 23 | My solution | 06:25 | |
| 24 | Visualizing with our dev tools | 04:29 | |
| 25 | Introduction to flex-basis | 00:30 | |
| 26 | The basics of flex-basis | 06:05 | |
| 27 | flex-basis challenge | 03:18 | |
| 28 | flex-basis solution | 05:59 | |
| 29 | Introduction to alignment and justification | 01:20 | |
| 30 | Justification basics | 06:29 | |
| 31 | Justification continued | 04:35 | |
| 32 | Justification and flex-direction | 03:25 | |
| 33 | align-items basics | 04:46 | |
| 34 | align-items: baseline | 03:36 | |
| 35 | Aligning and justifying buttons | 06:16 | |
| 36 | A simple navigation - challenge | 01:50 | |
| 37 | A simple navigation - solution | 04:55 | |
| 38 | A simple navigation follow-up challenge/solution | 02:54 | |
| 39 | A look at align-self | 03:03 | |
| 40 | Alignment and Justification form challenge | 01:55 | |
| 41 | Alignment and Justification form solution | 06:36 | |
| 42 | flex-wrap introduction | 01:14 | |
| 43 | The basics of flex-wrap | 02:43 | |
| 44 | flex-wrap and flex-direction | 03:12 | |
| 45 | flex-wrap challenge | 01:35 | |
| 46 | flex-wrap solution | 03:05 | |
| 47 | Using flex-wrap with flex-grow and flex-shrink | 06:03 | |
| 48 | Layouts with flex-wrap | 05:32 | |
| 49 | flex-wrap challenge #2 | 03:50 | |
| 50 | Solution to the challenge | 06:40 | |
| 51 | The flex-flow shorthand | 02:56 | |
| 52 | A look at align-content | 07:08 | |
| 53 | The place-content shorthand | 01:40 | |
| 54 | Introduction to the magic of margins | 00:28 | |
| 55 | auto margins and flexbox | 09:30 | |
| 56 | Fixing a floating footer | 03:41 | |
| 57 | Introduction to gap | 00:47 | |
| 58 | the gap property | 06:28 | |
| 59 | Creating a fallback for gap | 03:19 | |
| 60 | flex-grow, revisited | 00:48 | |
| 61 | Pushing flex-grow to it's limits | 03:22 | |
| 62 | A use case | 08:41 | |
| 63 | Introduction to patterns and layouts | 01:37 | |
| 64 | Equal columns, every time | 04:57 | |
| 65 | Content / Sidebar | 06:35 | |
| 66 | Adaptable sidebar | 05:44 | |
| 67 | Grid-ish | 02:58 | |
| 68 | Combining layouts and patterns | 02:09 | |
| 69 | The holy albatross | 09:19 | |
| 70 | The end! | 01:08 |
Unlock unlimited learning
Get instant access to all 69 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionWhat courses are similar to Flexbox Simplified?
-
Updated 9mo agoComplete Web Developer in 2025: Zero to Mastery
By: Udemy, Zero To MasteryLearn to code. Get hired. This is one of the most popular, highly rated coding bootcamps online. It's also the most moderen and up-to-date. Guaranteed. You'll g37h 3m5/5 -
Updated 2y agoBeyond CSS
By: Kevin PowellBeyond CSS is a course designed to help you use modern CSS and tools like Sass and PostCSS in order to get control of your stylesheets.18h 12m5/5 -
Updated 2y agoBeginner Tailwind
By: Chris SevTailwind makes writing CSS easier and lets us customize our designs faster than any other CSS framework.9h 33m
Frequently asked questions
Are there any prerequisites for enrolling in this course?
This course does not list specific prerequisites, but a basic understanding of HTML and CSS would be beneficial. The course focuses on teaching Flexbox, so familiarity with web development fundamentals is recommended to fully grasp the material.
What projects or challenges will I complete in this course?
The course includes various challenges and solutions to reinforce learning. Examples include a 'Grow & Shrink Challenge', a 'flex-basis challenge', and creating a 'simple navigation' using Flexbox. These practical exercises are designed to help you apply Flexbox concepts in real-world scenarios.
Who is the target audience for this course?
The course is intended for web developers and designers who want to improve their skills in creating responsive layouts using Flexbox. It caters to those who have a basic understanding of CSS but seek to deepen their knowledge of modern layout techniques.
How does the depth of this course compare to other Flexbox courses?
The course provides a detailed exploration of Flexbox, with 70 lessons covering a wide range of topics such as 'flex-direction', 'flex-wrap', 'alignment and justification', and 'the gap property'. It offers numerous challenges and solutions, allowing for thorough practice and understanding of Flexbox.
Does the course cover any specific tools or software?
Yes, there is a lesson titled 'The software I'll be using' which likely introduces the tools used throughout the course. While the exact software is not listed, it is common for web development courses to use text editors and browser developer tools.
What topics are not covered in this course?
The course specifically focuses on Flexbox and does not cover other CSS layout modules like Grid. It is dedicated to exploring Flexbox-related properties, challenges, and solutions, without venturing into other layout techniques.
How much time should I expect to commit to this course?
While the exact runtime of the course is not provided, with 70 lessons, you can expect to dedicate several hours to complete it. The course includes practical exercises and challenges, so additional time will be needed for hands-on practice and review of solutions.