Flexbox Simplified
4h 41m 57s
English
Paid
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.
Read more about the course
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
Watch Online Flexbox Simplified
Join premium to watch
Go to premium
# | Title | Duration |
---|---|---|
1 | Welcome to the course! | 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 |
Similar courses to Flexbox Simplified

The Ultimate HTML5 & CSS3 Series: Part 3codewithmosh (Mosh Hamedani)
Category: HTML, CSS
Duration 5 hours 38 minutes 4 seconds
Course

Tailwind MasteryBuild UI
Category: CSS
Duration 2 hours 34 minutes 57 seconds
Course

The Responsive Web Design Bootcampkevin powell
Category: CSS
Duration 17 hours 36 minutes 12 seconds
Course

CSS for JavaScript DevelopersJosh Comeau
Category: CSS
Duration
Course

Mastering CSS Layoutfullstack.io
Category: CSS
Duration 1 hour 27 minutes 20 seconds
Course

CSS Demystified: Start writing CSS with confidencekevin powell
Category: CSS
Duration 20 hours 45 minutes 24 seconds
Course

10 Mega Responsive Websites with HTML, CSS, and JavaScriptudemy
Category: JavaScript, HTML, CSS
Duration 21 hours 54 minutes 19 seconds
Course

Pixel Perfect Figma to Tailwindprotailwind.com (Simon Vrachliotis)Simon Vrachliotis
Category: CSS, Figma
Duration 2 hours 40 minutes 16 seconds
Course

Beyond CSSkevin powell
Category: CSS
Duration 18 hours 12 minutes 41 seconds
Course