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 3

The Ultimate HTML5 & CSS3 Series: Part 3codewithmosh (Mosh Hamedani)

Category: HTML, CSS
Duration 5 hours 38 minutes 4 seconds
Tailwind Mastery

Tailwind MasteryBuild UI

Category: CSS
Duration 2 hours 34 minutes 57 seconds
The Responsive Web Design Bootcamp

The Responsive Web Design Bootcampkevin powell

Category: CSS
Duration 17 hours 36 minutes 12 seconds
Mastering CSS Layout

Mastering CSS Layoutfullstack.io

Category: CSS
Duration 1 hour 27 minutes 20 seconds
CSS Demystified: Start writing CSS with confidence

CSS Demystified: Start writing CSS with confidencekevin powell

Category: CSS
Duration 20 hours 45 minutes 24 seconds
10 Mega Responsive Websites with HTML, CSS, and JavaScript

10 Mega Responsive Websites with HTML, CSS, and JavaScriptudemy

Category: JavaScript, HTML, CSS
Duration 21 hours 54 minutes 19 seconds
Pixel Perfect Figma to Tailwind

Pixel Perfect Figma to Tailwindprotailwind.com (Simon Vrachliotis)Simon Vrachliotis

Category: CSS, Figma
Duration 2 hours 40 minutes 16 seconds
Beyond CSS

Beyond CSSkevin powell

Category: CSS
Duration 18 hours 12 minutes 41 seconds