CourseFlix

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.

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 thumbnail

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.

Watch Online 70 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 70 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome to the course!
All Course Lessons (70)
#Lesson TitleDurationAccess
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 subscription

Course content

70 lessons · 4h 41m 57s
Show all 70 lessons
  1. 1 Welcome to the course! 00:47
  2. 2 My approach 05:01
  3. 3 The software I'll be using 03:32
  4. 4 The Discord Community 08:00
  5. 5 The file structure 03:14
  6. 6 Introduction to declaring display: flex 00:50
  7. 7 The flex container 03:08
  8. 8 The flex items - part 1 02:10
  9. 9 The flex items - part 2 03:46
  10. 10 The flex items - part 3 04:46
  11. 11 The flex items - part 4 03:57
  12. 12 A challenge 01:47
  13. 13 Introduction to flexing our muscles 00:46
  14. 14 flex-direction basics 03:38
  15. 15 Collapsing margins 04:23
  16. 16 flex-direction - part 2 11:08
  17. 17 The order property 04:10
  18. 18 flex-grow 04:31
  19. 19 flex-shrink 03:38
  20. 20 Grow & Shrink Challenge 03:33
  21. 21 Grow & Shrink Solution 07:38
  22. 22 Another challenge 01:59
  23. 23 My solution 06:25
  24. 24 Visualizing with our dev tools 04:29
  25. 25 Introduction to flex-basis 00:30
  26. 26 The basics of flex-basis 06:05
  27. 27 flex-basis challenge 03:18
  28. 28 flex-basis solution 05:59
  29. 29 Introduction to alignment and justification 01:20
  30. 30 Justification basics 06:29
  31. 31 Justification continued 04:35
  32. 32 Justification and flex-direction 03:25
  33. 33 align-items basics 04:46
  34. 34 align-items: baseline 03:36
  35. 35 Aligning and justifying buttons 06:16
  36. 36 A simple navigation - challenge 01:50
  37. 37 A simple navigation - solution 04:55
  38. 38 A simple navigation follow-up challenge/solution 02:54
  39. 39 A look at align-self 03:03
  40. 40 Alignment and Justification form challenge 01:55
  41. 41 Alignment and Justification form solution 06:36
  42. 42 flex-wrap introduction 01:14
  43. 43 The basics of flex-wrap 02:43
  44. 44 flex-wrap and flex-direction 03:12
  45. 45 flex-wrap challenge 01:35
  46. 46 flex-wrap solution 03:05
  47. 47 Using flex-wrap with flex-grow and flex-shrink 06:03
  48. 48 Layouts with flex-wrap 05:32
  49. 49 flex-wrap challenge #2 03:50
  50. 50 Solution to the challenge 06:40
  51. 51 The flex-flow shorthand 02:56
  52. 52 A look at align-content 07:08
  53. 53 The place-content shorthand 01:40
  54. 54 Introduction to the magic of margins 00:28
  55. 55 auto margins and flexbox 09:30
  56. 56 Fixing a floating footer 03:41
  57. 57 Introduction to gap 00:47
  58. 58 the gap property 06:28
  59. 59 Creating a fallback for gap 03:19
  60. 60 flex-grow, revisited 00:48
  61. 61 Pushing flex-grow to it's limits 03:22
  62. 62 A use case 08:41
  63. 63 Introduction to patterns and layouts 01:37
  64. 64 Equal columns, every time 04:57
  65. 65 Content / Sidebar 06:35
  66. 66 Adaptable sidebar 05:44
  67. 67 Grid-ish 02:58
  68. 68 Combining layouts and patterns 02:09
  69. 69 The holy albatross 09:19
  70. 70 The end! 01:08

Related courses

  • CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass) thumbnail

    CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass)

    By: Udemy, Academind Pro (Maximilian Schwarzmüller)
    CSS - short for C ascading S tyle S heets - is a "programming language" you use to turn your raw HTML pages into real beautiful websites.
    20 hours 54 minutes 47 seconds 5 / 5
  • The Responsive Web Design Bootcamp thumbnail

    The Responsive Web Design Bootcamp

    By: Kevin Powell
    It gives you a deep understanding of CSS and responsive design while keeping you fully engaged along the way.
    17 hours 36 minutes 12 seconds
  • Page Transitions thumbnail

    Page Transitions

    By: SuperHi
    Integrate 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

Frequently asked questions

What is Flexbox Simplified about?
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.
Who teaches Flexbox Simplified?
Flexbox Simplified is taught by Kevin Powell. You can find more courses by this instructor on the corresponding source page.
How long is Flexbox Simplified?
Flexbox Simplified contains 70 lessons with a total runtime of 4 hours 41 minutes. All lessons are available to watch online at your own pace.
Is Flexbox Simplified free to watch?
Flexbox Simplified is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Flexbox Simplified online?
Flexbox Simplified is available to watch online on CourseFlix at https://courseflix.net/course/flexbox-simplified. The page hosts every lesson with the integrated video player; no download is required.