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
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
About the Author: kevin powell
Kevin Powell is the Canadian CSS instructor with one of the largest CSS-focused YouTube channels on the platform. Kevin has been publishing weekly CSS content since 2017 and is widely recognized as one of the clearest teachers of modern CSS — Grid, custom properties, container queries, the cascade-layer model, and the new color and selector specifications.
His paid courses on kevinpowell.co cover responsive design, modern CSS layout, and the performance side of CSS authoring. The free YouTube material and paid courses reinforce each other; engineers who follow Kevin tend to ship tighter, less-buggy CSS than peers who learned from documentation alone.
Watch Online 70 lessons
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 subscriptionRelated courses
-
Mastering CSS Grid 2022 - With 3 cool projects
Sources: udemyCSS Grid is a relatively new and unused concept to CSS. It's very important these days that our layouts are simple to maintain, and easy to adjust based on the dimensions of our…17 hours 16 minutes 22 seconds -
Fundamentals of CSS Grid
Sources: zerotomastery.ioLearn how to create responsive and flexible layouts using CSS Grid. Master practical techniques for building modern interfaces on web pages.3 hours 32 minutes 35 seconds 5 / 5 -
The Responsive Web Design Bootcamp
Sources: kevin powellIt gives you a deep understanding of CSS and responsive design while keeping you fully engaged along the way. You'll learn to build four different layouts: a blog, a landing page…17 hours 36 minutes 12 seconds -
Modern HTML & CSS From The Beginning Course
Sources: Brad TraversyThis course is suitable for beginners who want to learn HTML and CSS from scratch to an advanced level, as well as for developers who want to implement...24 hours 21 minutes 52 seconds -
Sass - from beginner to real world
Sources: kevin powellSass has become an essential language to learn for front-end developers. It helps you write your code faster, pull off things that sometimes seem like magic, an8 hours 2 minutes 59 seconds -
Page Transitions
Sources: superhi.comIntegrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.4 hours 10 minutes 33 seconds