Flexbox Simplified

Name: Flexbox Simplified
Price: 9 USD
Availability: InStock

4h 41m 57s

English

Paid

May 15, 2024

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.

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