Master CSS Flexbox for creating flexible, responsive layouts with powerful alignment and distribution controls. Build modern web interfaces with ease.
CSS Flexbox (Flexible Box Layout) revolutionized web layouts by providing an efficient way to arrange, distribute, and align elements within containers. Unlike traditional layout methods that rely on floats and positioning, Flexbox offers intuitive control over element behavior in one-dimensional space.
Flexbox excels at solving common layout challenges: centering content, creating equal-height columns, building responsive navigation bars, and distributing space dynamically. It's the foundation of modern CSS frameworks and essential for creating professional, responsive web interfaces.
This lesson will give you complete mastery over Flexbox, from basic container setup to advanced responsive layout techniques that adapt beautifully across all devices.
A flex container is created by applying display: flex to an element, establishing the main and cross axes that govern how flex items behave.
Creating a Flex Container:
1.flex-container {
2 display: flex; /* Creates flex formatting context */
3 /* All direct children become flex items */
4}
5
6.inline-flex-container {
7 display: inline-flex; /* Inline-level flex container */
8 /* Container behaves inline, children flex internally */
9}Flex Direction - Main Axis Control:
1.flex-row {
2 display: flex;
3 flex-direction: row; /* Default: left to right */
4}
5
6.flex-row-reverse {
7 display: flex;
8 flex-direction: row-reverse; /* Right to left */
9}
10
11.flex-column {
12 display: flex;
13 flex-direction: column; /* Top to bottom */
14}
15
16.flex-column-reverse {
17 display: flex;
18 flex-direction: column-reverse; /* Bottom to top */
19}Flex Wrap - Multi-line Behavior:
1.flex-nowrap {
2 display: flex;
3 flex-wrap: nowrap; /* Default: single line, items may shrink */
4}
5
6.flex-wrap {
7 display: flex;
8 flex-wrap: wrap; /* Items wrap to new lines */
9}
10
11.flex-wrap-reverse {
12 display: flex;
13 flex-wrap: wrap-reverse; /* Wrap in reverse order */
14}
15
16/* Shorthand for direction and wrap */
17.flex-flow {
18 display: flex;
19 flex-flow: row wrap; /* flex-direction flex-wrap */
20}Practical Container Examples:
1/* Navigation bar */
2.navbar {
3 display: flex;
4 flex-direction: row;
5 justify-content: space-between;
6 align-items: center;
7 padding: 1rem;
8}
9
10/* Card grid that wraps */
11.card-grid {
12 display: flex;
13 flex-wrap: wrap;
14 gap: 1rem;
15 justify-content: flex-start;
16}
17
18/* Vertical sidebar layout */
19.sidebar {
20 display: flex;
21 flex-direction: column;
22 height: 100vh;
23 width: 250px;
24}
25
26/* Responsive flex container */
27.responsive-container {
28 display: flex;
29 flex-direction: column;
30}
31
32@media (min-width: 768px) {
33 .responsive-container {
34 flex-direction: row;
35 }
36}Justify-content controls alignment along the main axis, while align-items controls alignment along the cross axis.
Justify-Content (Main Axis Alignment):
1.justify-flex-start {
2 display: flex;
3 justify-content: flex-start; /* Default: items at start */
4}
5
6.justify-flex-end {
7 display: flex;
8 justify-content: flex-end; /* Items at end */
9}
10
11.justify-center {
12 display: flex;
13 justify-content: center; /* Items centered */
14}
15
16.justify-space-between {
17 display: flex;
18 justify-content: space-between; /* Equal space between items */
19}
20
21.justify-space-around {
22 display: flex;
23 justify-content: space-around; /* Equal space around items */
24}
25
26.justify-space-evenly {
27 display: flex;
28 justify-content: space-evenly; /* Equal space including edges */
29}Align-Items (Cross Axis Alignment):
1.align-flex-start {
2 display: flex;
3 align-items: flex-start; /* Items at cross axis start */
4}
5
6.align-flex-end {
7 display: flex;
8 align-items: flex-end; /* Items at cross axis end */
9}
10
11.align-center {
12 display: flex;
13 align-items: center; /* Items centered on cross axis */
14}
15
16.align-baseline {
17 display: flex;
18 align-items: baseline; /* Items aligned to text baseline */
19}
20
21.align-stretch {
22 display: flex;
23 align-items: stretch; /* Default: items stretch to fill */
24}Perfect Centering (Both Axes):
1.perfect-center {
2 display: flex;
3 justify-content: center; /* Center on main axis */
4 align-items: center; /* Center on cross axis */
5 height: 100vh; /* Full viewport height */
6}
7
8/* Hero section centering */
9.hero-center {
10 display: flex;
11 flex-direction: column;
12 justify-content: center;
13 align-items: center;
14 text-align: center;
15 min-height: 500px;
16 padding: 2rem;
17}Align-Content (Multi-line Cross Axis):
1.align-content-example {
2 display: flex;
3 flex-wrap: wrap;
4 height: 300px;
5 align-content: flex-start; /* Pack lines at start */
6 align-content: flex-end; /* Pack lines at end */
7 align-content: center; /* Center lines */
8 align-content: space-between; /* Distribute lines */
9 align-content: space-around; /* Space around lines */
10 align-content: stretch; /* Default: stretch lines */
11}Common Alignment Patterns:
1/* Header with logo and navigation */
2.header {
3 display: flex;
4 justify-content: space-between;
5 align-items: center;
6 padding: 1rem 2rem;
7 background: white;
8 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
9}
10
11/* Button group */
12.button-group {
13 display: flex;
14 justify-content: center;
15 align-items: center;
16 gap: 1rem;
17 margin: 2rem 0;
18}
19
20/* Card with content distribution */
21.card {
22 display: flex;
23 flex-direction: column;
24 justify-content: space-between;
25 align-items: stretch;
26 height: 300px;
27 padding: 1.5rem;
28}
29
30/* Footer with centered content */
31.footer {
32 display: flex;
33 flex-direction: column;
34 justify-content: center;
35 align-items: center;
36 padding: 2rem;
37 background: #1a1a1a;
38 color: white;
39}Flex items can be individually controlled using flex-grow, flex-shrink, flex-basis, and align-self properties.
Flex-Grow: Expansion Behavior:
1.flex-item {
2 flex-grow: 0; /* Default: don't grow */
3}
4
5.grow-1 {
6 flex-grow: 1; /* Take 1 part of available space */
7}
8
9.grow-2 {
10 flex-grow: 2; /* Take 2 parts of available space */
11}
12
13/* Practical growing examples */
14.sidebar { flex-grow: 0; width: 250px; }
15.main-content { flex-grow: 1; } /* Takes remaining space */
16.aside { flex-grow: 0; width: 200px; }
17
18/* Equal width items */
19.equal-items > * {
20 flex-grow: 1; /* All items grow equally */
21}Flex-Shrink: Compression Behavior:
1.flex-item {
2 flex-shrink: 1; /* Default: can shrink */
3}
4
5.no-shrink {
6 flex-shrink: 0; /* Never shrink below basis/content */
7}
8
9.shrink-more {
10 flex-shrink: 2; /* Shrink twice as much as default */
11}
12
13/* Practical shrinking examples */
14.priority-content {
15 flex-shrink: 0; /* Always maintain size */
16 width: 300px;
17}
18
19.flexible-content {
20 flex-shrink: 1; /* Can shrink when needed */
21 min-width: 200px; /* But not below minimum */
22}Flex-Basis: Initial Size:
1.flex-basis-auto {
2 flex-basis: auto; /* Default: use content size */
3}
4
5.flex-basis-fixed {
6 flex-basis: 200px; /* Start at 200px */
7}
8
9.flex-basis-percentage {
10 flex-basis: 25%; /* Start at 25% of container */
11}
12
13.flex-basis-content {
14 flex-basis: content; /* Size to content (if supported) */
15}Flex Shorthand Property:
1/* flex: grow shrink basis */
2.flex-default {
3 flex: 0 1 auto; /* Default values */
4}
5
6.flex-auto {
7 flex: 1 1 auto; /* Common: grow and shrink, auto basis */
8}
9
10.flex-none {
11 flex: 0 0 auto; /* Don't grow or shrink */
12}
13
14.flex-1 {
15 flex: 1; /* Shorthand: 1 1 0% */
16}
17
18.flex-equal {
19 flex: 1 0 0%; /* Equal size, don't shrink */
20}
21
22/* Practical flex examples */
23.header-item { flex: 0 0 auto; } /* Fixed size items */
24.content-area { flex: 1; } /* Takes remaining space */
25.sidebar { flex: 0 0 250px; } /* Fixed 250px width */Align-Self: Individual Cross Axis Alignment:
1.align-self-auto {
2 align-self: auto; /* Default: inherit from align-items */
3}
4
5.align-self-start {
6 align-self: flex-start; /* Override container alignment */
7}
8
9.align-self-center {
10 align-self: center; /* Center this item only */
11}
12
13.align-self-end {
14 align-self: flex-end; /* Align to end */
15}
16
17.align-self-stretch {
18 align-self: stretch; /* Stretch this item */
19}
20
21/* Practical align-self usage */
22.feature-card {
23 align-self: flex-start; /* Don't stretch with others */
24}
25
26.call-to-action {
27 align-self: center; /* Center the CTA button */
28}Order Property: Visual Reordering:
1.item-1 { order: 0; } /* Default order */
2.item-2 { order: 1; } /* Appears second */
3.item-3 { order: -1; } /* Appears first */
4
5/* Responsive reordering */
6.sidebar { order: 2; }
7.main { order: 1; }
8
9@media (min-width: 768px) {
10 .sidebar { order: 1; }
11 .main { order: 2; }
12}Master complex layout patterns and responsive techniques using advanced Flexbox features.
Holy Grail Layout with Flexbox:
1.holy-grail {
2 display: flex;
3 flex-direction: column;
4 min-height: 100vh;
5}
6
7.header, .footer {
8 flex: 0 0 auto; /* Don't grow/shrink */
9 background: #333;
10 color: white;
11 padding: 1rem;
12}
13
14.middle {
15 flex: 1; /* Take remaining space */
16 display: flex;
17}
18
19.sidebar-left, .sidebar-right {
20 flex: 0 0 200px; /* Fixed width sidebars */
21 background: #f5f5f5;
22 padding: 1rem;
23}
24
25.main-content {
26 flex: 1; /* Flexible main content */
27 padding: 1rem;
28}
29
30/* Responsive: stack on mobile */
31@media (max-width: 768px) {
32 .middle {
33 flex-direction: column;
34 }
35
36 .sidebar-left, .sidebar-right {
37 flex: 0 0 auto;
38 order: 2;
39 }
40
41 .main-content {
42 order: 1;
43 }
44}Responsive Card Grid:
1.card-container {
2 display: flex;
3 flex-wrap: wrap;
4 gap: 2rem;
5 padding: 2rem;
6}
7
8.card {
9 flex: 1 1 300px; /* Grow, shrink, 300px basis */
10 min-width: 280px; /* Minimum width */
11 max-width: 400px; /* Maximum width */
12 background: white;
13 border-radius: 8px;
14 padding: 1.5rem;
15 box-shadow: 0 4px 6px rgba(0,0,0,0.1);
16}
17
18/* Ensure last row items don't stretch */
19.card-container::after {
20 content: '';
21 flex: 999; /* Large flex-grow */
22 max-width: 400px; /* Same as card max-width */
23}Flexible Navigation Patterns:
1/* Main navigation */
2.main-nav {
3 display: flex;
4 justify-content: space-between;
5 align-items: center;
6 padding: 1rem 2rem;
7}
8
9.nav-brand {
10 flex: 0 0 auto;
11 font-size: 1.5rem;
12 font-weight: bold;
13}
14
15.nav-menu {
16 display: flex;
17 gap: 2rem;
18 list-style: none;
19}
20
21.nav-actions {
22 display: flex;
23 gap: 1rem;
24 align-items: center;
25}
26
27/* Breadcrumb navigation */
28.breadcrumb {
29 display: flex;
30 align-items: center;
31 gap: 0.5rem;
32 padding: 1rem 0;
33}
34
35.breadcrumb-item {
36 display: flex;
37 align-items: center;
38}
39
40.breadcrumb-separator {
41 margin: 0 0.5rem;
42 color: #999;
43}
44
45/* Tab navigation */
46.tab-nav {
47 display: flex;
48 border-bottom: 2px solid #e5e5e5;
49}
50
51.tab-item {
52 flex: 0 0 auto;
53 padding: 1rem 2rem;
54 background: none;
55 border: none;
56 border-bottom: 2px solid transparent;
57 cursor: pointer;
58 transition: all 0.3s;
59}
60
61.tab-item.active {
62 border-bottom-color: #3b82f6;
63 color: #3b82f6;
64}Complex Layout Components:
1/* Media object pattern */
2.media-object {
3 display: flex;
4 gap: 1rem;
5}
6
7.media-image {
8 flex: 0 0 auto;
9}
10
11.media-content {
12 flex: 1;
13 min-width: 0; /* Allow text truncation */
14}
15
16/* Sticky footer with flex */
17.page-wrapper {
18 display: flex;
19 flex-direction: column;
20 min-height: 100vh;
21}
22
23.main-content {
24 flex: 1 0 auto; /* Grow to fill space */
25}
26
27.footer {
28 flex: 0 0 auto; /* Fixed height footer */
29}
30
31/* Form layout with flex */
32.form-row {
33 display: flex;
34 gap: 1rem;
35 margin-bottom: 1rem;
36}
37
38.form-group {
39 flex: 1;
40 display: flex;
41 flex-direction: column;
42}
43
44.form-group.narrow {
45 flex: 0 0 120px; /* Fixed width for short inputs */
46}
47
48.form-actions {
49 display: flex;
50 justify-content: flex-end;
51 gap: 1rem;
52 margin-top: 2rem;
53}
54
55/* Pricing table with flex */
56.pricing-table {
57 display: flex;
58 gap: 2rem;
59 align-items: stretch; /* Equal height columns */
60}
61
62.pricing-column {
63 flex: 1;
64 display: flex;
65 flex-direction: column;
66 border: 2px solid #e5e5e5;
67 border-radius: 8px;
68 padding: 2rem;
69}
70
71.pricing-features {
72 flex: 1; /* Push button to bottom */
73 margin: 1rem 0;
74}
75
76.pricing-button {
77 margin-top: auto; /* Stick to bottom */
78}Performance and Best Practices:
1/* Efficient flexbox patterns */
2.efficient-flex {
3 display: flex;
4 /* Avoid unnecessary flex calculations */
5 align-items: stretch; /* Default, don't specify unless needed */
6}
7
8/* Use gaps instead of margins when possible */
9.gap-container {
10 display: flex;
11 gap: 1rem; /* More efficient than item margins */
12}
13
14/* Optimize for performance */
15.performant-flex {
16 display: flex;
17 /* Use transform for animations, not flex properties */
18 transition: transform 0.3s ease;
19}
20
21.performant-flex:hover {
22 transform: scale(1.05); /* Better than animating flex */
23}A comprehensive demonstration of CSS Flexbox with responsive navigation, card grids, layouts, and advanced alignment techniques.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Flexbox Layout Mastery</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 line-height: 1.6;
17 color: #333;
18 background: #f8fafc;
19 }
20
21 /* Flexbox Navigation Header */
22 .header {
23 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
24 color: white;
25 position: sticky;
26 top: 0;
27 z-index: 1000;
28 box-shadow: 0 2px 10px rgba(0,0,0,0.2);
29 }
30
31 .navbar {
32 display: flex;
33 justify-content: space-between;
34 align-items: center;
35 padding: 1rem 2rem;
36 max-width: 1200px;
37 margin: 0 auto;
38 }
39
40 .nav-brand {
41 flex: 0 0 auto;
42 font-size: 1.5rem;
43 font-weight: bold;
44 text-decoration: none;
45 color: white;
46 }
47
48 .nav-menu {
49 display: flex;
50 gap: 2rem;
51 list-style: none;
52 align-items: center;
53 }
54
55 .nav-menu a {
56 color: white;
57 text-decoration: none;
58 padding: 0.5rem 1rem;
59 border-radius: 20px;
60 transition: all 0.3s ease;
61 }
62
63 .nav-menu a:hover {
64 background: rgba(255,255,255,0.2);
65 transform: translateY(-2px);
66 }
67
68 .nav-actions {
69 display: flex;
70 gap: 1rem;
71 align-items: center;
72 }
73
74 .btn {
75 padding: 0.5rem 1.5rem;
76 border: 2px solid white;
77 background: transparent;
78 color: white;
79 text-decoration: none;
80 border-radius: 25px;
81 font-weight: 500;
82 transition: all 0.3s ease;
83 }
84
85 .btn:hover {
86 background: white;
87 color: #667eea;
88 transform: scale(1.05);
89 }
90
91 /* Container with max-width and centering */
92 .container {
93 max-width: 1200px;
94 margin: 0 auto;
95 padding: 0 2rem;
96 }
97
98 /* Hero Section with Flexbox Centering */
99 .hero {
100 background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
101 color: white;
102 padding: 6rem 0;
103 margin-bottom: 4rem;
104 }
105
106 .hero-content {
107 display: flex;
108 flex-direction: column;
109 justify-content: center;
110 align-items: center;
111 text-align: center;
112 gap: 2rem;
113 }
114
115 .hero h1 {
116 font-size: clamp(2.5rem, 5vw, 4rem);
117 font-weight: 700;
118 text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
119 }
120
121 .hero p {
122 font-size: 1.2rem;
123 max-width: 600px;
124 opacity: 0.9;
125 }
126
127 .hero-buttons {
128 display: flex;
129 gap: 1rem;
130 flex-wrap: wrap;
131 justify-content: center;
132 }
133
134 /* Section Styling */
135 .section {
136 padding: 4rem 0;
137 }
138
139 .section-title {
140 text-align: center;
141 font-size: 2.5rem;
142 color: #1e293b;
143 margin-bottom: 3rem;
144 }
145
146 /* Flexbox Direction Examples */
147 .direction-demo {
148 display: flex;
149 gap: 2rem;
150 margin-bottom: 3rem;
151 flex-wrap: wrap;
152 }
153
154 .direction-container {
155 flex: 1;
156 min-width: 250px;
157 background: white;
158 border-radius: 12px;
159 padding: 2rem;
160 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
161 }
162
163 .direction-title {
164 font-size: 1.2rem;
165 font-weight: 600;
166 margin-bottom: 1rem;
167 color: #3b82f6;
168 }
169
170 .flex-row {
171 display: flex;
172 flex-direction: row;
173 gap: 0.5rem;
174 padding: 1rem;
175 background: #f1f5f9;
176 border-radius: 8px;
177 }
178
179 .flex-column {
180 display: flex;
181 flex-direction: column;
182 gap: 0.5rem;
183 padding: 1rem;
184 background: #f1f5f9;
185 border-radius: 8px;
186 }
187
188 .flex-row-reverse {
189 display: flex;
190 flex-direction: row-reverse;
191 gap: 0.5rem;
192 padding: 1rem;
193 background: #f1f5f9;
194 border-radius: 8px;
195 }
196
197 .flex-column-reverse {
198 display: flex;
199 flex-direction: column-reverse;
200 gap: 0.5rem;
201 padding: 1rem;
202 background: #f1f5f9;
203 border-radius: 8px;
204 }
205
206 .flex-item {
207 background: #3b82f6;
208 color: white;
209 padding: 1rem;
210 border-radius: 6px;
211 text-align: center;
212 font-weight: 600;
213 }
214
215 /* Justify Content Examples */
216 .justify-demo {
217 display: flex;
218 flex-wrap: wrap;
219 gap: 2rem;
220 margin-bottom: 3rem;
221 }
222
223 .justify-container {
224 flex: 1;
225 min-width: 300px;
226 background: white;
227 border-radius: 12px;
228 padding: 1.5rem;
229 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
230 }
231
232 .justify-title {
233 font-weight: 600;
234 margin-bottom: 1rem;
235 color: #1e293b;
236 }
237
238 .justify-flex-start {
239 display: flex;
240 justify-content: flex-start;
241 gap: 0.5rem;
242 padding: 1rem;
243 background: #dbeafe;
244 border-radius: 8px;
245 margin-bottom: 1rem;
246 }
247
248 .justify-center {
249 display: flex;
250 justify-content: center;
251 gap: 0.5rem;
252 padding: 1rem;
253 background: #dcfce7;
254 border-radius: 8px;
255 margin-bottom: 1rem;
256 }
257
258 .justify-space-between {
259 display: flex;
260 justify-content: space-between;
261 gap: 0.5rem;
262 padding: 1rem;
263 background: #fef3c7;
264 border-radius: 8px;
265 margin-bottom: 1rem;
266 }
267
268 .justify-space-around {
269 display: flex;
270 justify-content: space-around;
271 gap: 0.5rem;
272 padding: 1rem;
273 background: #fce7f3;
274 border-radius: 8px;
275 }
276
277 .demo-item {
278 background: #1e293b;
279 color: white;
280 padding: 0.5rem 1rem;
281 border-radius: 4px;
282 font-size: 0.9rem;
283 font-weight: 500;
284 }
285
286 /* Align Items Examples */
287 .align-demo {
288 display: flex;
289 gap: 2rem;
290 margin-bottom: 3rem;
291 flex-wrap: wrap;
292 }
293
294 .align-container {
295 flex: 1;
296 min-width: 300px;
297 background: white;
298 border-radius: 12px;
299 padding: 1.5rem;
300 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
301 }
302
303 .align-flex-start {
304 display: flex;
305 align-items: flex-start;
306 height: 150px;
307 gap: 0.5rem;
308 padding: 1rem;
309 background: #f1f5f9;
310 border-radius: 8px;
311 margin-bottom: 1rem;
312 }
313
314 .align-center {
315 display: flex;
316 align-items: center;
317 height: 150px;
318 gap: 0.5rem;
319 padding: 1rem;
320 background: #f1f5f9;
321 border-radius: 8px;
322 margin-bottom: 1rem;
323 }
324
325 .align-flex-end {
326 display: flex;
327 align-items: flex-end;
328 height: 150px;
329 gap: 0.5rem;
330 padding: 1rem;
331 background: #f1f5f9;
332 border-radius: 8px;
333 }
334
335 .align-item-1 {
336 background: #ef4444;
337 color: white;
338 padding: 1rem;
339 border-radius: 4px;
340 height: 60px;
341 display: flex;
342 align-items: center;
343 justify-content: center;
344 }
345
346 .align-item-2 {
347 background: #10b981;
348 color: white;
349 padding: 1rem;
350 border-radius: 4px;
351 height: 80px;
352 display: flex;
353 align-items: center;
354 justify-content: center;
355 }
356
357 .align-item-3 {
358 background: #8b5cf6;
359 color: white;
360 padding: 1rem;
361 border-radius: 4px;
362 height: 100px;
363 display: flex;
364 align-items: center;
365 justify-content: center;
366 }
367
368 /* Flex Item Properties */
369 .flex-properties {
370 background: white;
371 border-radius: 12px;
372 padding: 2rem;
373 margin-bottom: 3rem;
374 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
375 }
376
377 .flex-grow-demo {
378 display: flex;
379 gap: 1rem;
380 margin-bottom: 2rem;
381 height: 100px;
382 }
383
384 .grow-0 {
385 flex-grow: 0;
386 background: #3b82f6;
387 color: white;
388 padding: 1rem;
389 border-radius: 8px;
390 display: flex;
391 align-items: center;
392 justify-content: center;
393 font-weight: 600;
394 width: 150px;
395 }
396
397 .grow-1 {
398 flex-grow: 1;
399 background: #10b981;
400 color: white;
401 padding: 1rem;
402 border-radius: 8px;
403 display: flex;
404 align-items: center;
405 justify-content: center;
406 font-weight: 600;
407 }
408
409 .grow-2 {
410 flex-grow: 2;
411 background: #f59e0b;
412 color: white;
413 padding: 1rem;
414 border-radius: 8px;
415 display: flex;
416 align-items: center;
417 justify-content: center;
418 font-weight: 600;
419 }
420
421 /* Responsive Card Grid */
422 .card-grid {
423 display: flex;
424 flex-wrap: wrap;
425 gap: 2rem;
426 margin-bottom: 3rem;
427 }
428
429 .card {
430 flex: 1 1 300px;
431 min-width: 280px;
432 max-width: 400px;
433 background: white;
434 border-radius: 16px;
435 padding: 2rem;
436 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
437 transition: all 0.3s ease;
438 display: flex;
439 flex-direction: column;
440 }
441
442 .card:hover {
443 transform: translateY(-5px);
444 box-shadow: 0 12px 40px rgba(0,0,0,0.15);
445 }
446
447 .card-header {
448 display: flex;
449 align-items: center;
450 gap: 1rem;
451 margin-bottom: 1rem;
452 }
453
454 .card-icon {
455 width: 50px;
456 height: 50px;
457 border-radius: 12px;
458 display: flex;
459 align-items: center;
460 justify-content: center;
461 font-size: 1.5rem;
462 color: white;
463 }
464
465 .card-title {
466 font-size: 1.3rem;
467 font-weight: 600;
468 color: #1e293b;
469 }
470
471 .card-content {
472 flex: 1;
473 margin-bottom: 1.5rem;
474 color: #64748b;
475 }
476
477 .card-footer {
478 margin-top: auto;
479 padding-top: 1rem;
480 border-top: 1px solid #e2e8f0;
481 }
482
483 .card-button {
484 width: 100%;
485 padding: 0.75rem 1.5rem;
486 background: #3b82f6;
487 color: white;
488 border: none;
489 border-radius: 8px;
490 font-weight: 600;
491 cursor: pointer;
492 transition: all 0.3s ease;
493 }
494
495 .card-button:hover {
496 background: #2563eb;
497 transform: scale(1.02);
498 }
499
500 /* Holy Grail Layout */
501 .holy-grail {
502 background: white;
503 border-radius: 16px;
504 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
505 overflow: hidden;
506 margin-bottom: 3rem;
507 min-height: 400px;
508 display: flex;
509 flex-direction: column;
510 }
511
512 .holy-grail-header {
513 background: #1e293b;
514 color: white;
515 padding: 1rem 2rem;
516 display: flex;
517 justify-content: space-between;
518 align-items: center;
519 }
520
521 .holy-grail-middle {
522 flex: 1;
523 display: flex;
524 }
525
526 .holy-grail-sidebar {
527 flex: 0 0 200px;
528 background: #f1f5f9;
529 padding: 1.5rem;
530 border-right: 1px solid #e2e8f0;
531 }
532
533 .holy-grail-main {
534 flex: 1;
535 padding: 2rem;
536 }
537
538 .holy-grail-aside {
539 flex: 0 0 150px;
540 background: #f8fafc;
541 padding: 1.5rem;
542 border-left: 1px solid #e2e8f0;
543 }
544
545 .holy-grail-footer {
546 background: #64748b;
547 color: white;
548 padding: 1rem 2rem;
549 text-align: center;
550 }
551
552 /* Mobile Navigation Toggle */
553 .mobile-toggle {
554 display: none;
555 background: none;
556 border: none;
557 color: white;
558 font-size: 1.5rem;
559 cursor: pointer;
560 }
561
562 /* Perfect Centering Demo */
563 .perfect-center-demo {
564 background: linear-gradient(135deg, #667eea, #764ba2);
565 color: white;
566 height: 300px;
567 border-radius: 16px;
568 display: flex;
569 justify-content: center;
570 align-items: center;
571 margin-bottom: 3rem;
572 text-align: center;
573 }
574
575 .center-content {
576 padding: 2rem;
577 }
578
579 .center-content h3 {
580 font-size: 2rem;
581 margin-bottom: 1rem;
582 }
583
584 /* Gap utility for better spacing */
585 .gap-demo {
586 background: white;
587 border-radius: 12px;
588 padding: 2rem;
589 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
590 margin-bottom: 3rem;
591 }
592
593 .gap-container {
594 display: flex;
595 gap: 1rem;
596 flex-wrap: wrap;
597 }
598
599 .gap-item {
600 flex: 1;
601 min-width: 150px;
602 background: linear-gradient(135deg, #3b82f6, #8b5cf6);
603 color: white;
604 padding: 1.5rem;
605 border-radius: 8px;
606 text-align: center;
607 font-weight: 600;
608 }
609
610 /* Responsive Design */
611 @media (max-width: 768px) {
612 .navbar {
613 padding: 1rem;
614 flex-wrap: wrap;
615 }
616
617 .nav-menu {
618 display: none;
619 width: 100%;
620 flex-direction: column;
621 background: rgba(0,0,0,0.1);
622 padding: 1rem 0;
623 margin-top: 1rem;
624 border-radius: 8px;
625 }
626
627 .nav-menu.active {
628 display: flex;
629 }
630
631 .mobile-toggle {
632 display: block;
633 }
634
635 .hero-content {
636 padding: 2rem 1rem;
637 }
638
639 .hero-buttons {
640 flex-direction: column;
641 align-items: center;
642 }
643
644 .direction-demo,
645 .justify-demo,
646 .align-demo {
647 flex-direction: column;
648 }
649
650 .holy-grail-middle {
651 flex-direction: column;
652 }
653
654 .holy-grail-sidebar,
655 .holy-grail-aside {
656 flex: 0 0 auto;
657 }
658
659 .container {
660 padding: 0 1rem;
661 }
662 }
663
664 /* Animation enhancements */
665 .animate-fade-in {
666 animation: fadeIn 0.6s ease-out;
667 }
668
669 @keyframes fadeIn {
670 from {
671 opacity: 0;
672 transform: translateY(20px);
673 }
674 to {
675 opacity: 1;
676 transform: translateY(0);
677 }
678 }
679
680 /* Utility classes */
681 .text-center { text-align: center; }
682 .mb-2 { margin-bottom: 1rem; }
683 .mb-4 { margin-bottom: 2rem; }
684 .mt-4 { margin-top: 2rem; }
685 </style>
686</head>
687<body>
688 <!-- Flexbox Navigation Header -->
689 <header class="header">
690 <nav class="navbar">
691 <a href="#" class="nav-brand">🚀 Flexbox Master</a>
692
693 <ul class="nav-menu" id="navMenu">
694 <li><a href="#basics">Basics</a></li>
695 <li><a href="#alignment">Alignment</a></li>
696 <li><a href="#properties">Properties</a></li>
697 <li><a href="#layouts">Layouts</a></li>
698 </ul>
699
700 <div class="nav-actions">
701 <a href="#" class="btn">Get Started</a>
702 <button class="mobile-toggle" onclick="toggleMenu()">☰</button>
703 </div>
704 </nav>
705 </header>
706
707 <!-- Hero Section with Perfect Centering -->
708 <section class="hero">
709 <div class="container">
710 <div class="hero-content animate-fade-in">
711 <h1>Master Flexbox Layout</h1>
712 <p>Learn powerful, flexible layout techniques that adapt beautifully to any screen size. Build modern, responsive interfaces with ease.</p>
713 <div class="hero-buttons">
714 <a href="#basics" class="btn">Start Learning</a>
715 <a href="#layouts" class="btn">See Examples</a>
716 </div>
717 </div>
718 </div>
719 </section>
720
721 <div class="container">
722 <!-- Perfect Centering Demo -->
723 <section class="perfect-center-demo animate-fade-in">
724 <div class="center-content">
725 <h3>Perfect Centering with Flexbox</h3>
726 <p>justify-content: center + align-items: center = Perfect centering on both axes</p>
727 </div>
728 </section>
729
730 <!-- Flex Direction Examples -->
731 <section id="basics" class="section">
732 <h2 class="section-title">🧭 Flex Direction Control</h2>
733 <div class="direction-demo">
734 <div class="direction-container animate-fade-in">
735 <div class="direction-title">flex-direction: row</div>
736 <div class="flex-row">
737 <div class="flex-item">1</div>
738 <div class="flex-item">2</div>
739 <div class="flex-item">3</div>
740 </div>
741 </div>
742
743 <div class="direction-container animate-fade-in">
744 <div class="direction-title">flex-direction: column</div>
745 <div class="flex-column">
746 <div class="flex-item">1</div>
747 <div class="flex-item">2</div>
748 <div class="flex-item">3</div>
749 </div>
750 </div>
751
752 <div class="direction-container animate-fade-in">
753 <div class="direction-title">flex-direction: row-reverse</div>
754 <div class="flex-row-reverse">
755 <div class="flex-item">1</div>
756 <div class="flex-item">2</div>
757 <div class="flex-item">3</div>
758 </div>
759 </div>
760
761 <div class="direction-container animate-fade-in">
762 <div class="direction-title">flex-direction: column-reverse</div>
763 <div class="flex-column-reverse">
764 <div class="flex-item">1</div>
765 <div class="flex-item">2</div>
766 <div class="flex-item">3</div>
767 </div>
768 </div>
769 </div>
770 </section>
771
772 <!-- Justify Content Examples -->
773 <section id="alignment" class="section">
774 <h2 class="section-title">📐 Justify Content (Main Axis)</h2>
775 <div class="justify-demo">
776 <div class="justify-container animate-fade-in">
777 <div class="justify-title">justify-content: flex-start</div>
778 <div class="justify-flex-start">
779 <div class="demo-item">Item 1</div>
780 <div class="demo-item">Item 2</div>
781 <div class="demo-item">Item 3</div>
782 </div>
783
784 <div class="justify-title">justify-content: center</div>
785 <div class="justify-center">
786 <div class="demo-item">Item 1</div>
787 <div class="demo-item">Item 2</div>
788 <div class="demo-item">Item 3</div>
789 </div>
790 </div>
791
792 <div class="justify-container animate-fade-in">
793 <div class="justify-title">justify-content: space-between</div>
794 <div class="justify-space-between">
795 <div class="demo-item">Item 1</div>
796 <div class="demo-item">Item 2</div>
797 <div class="demo-item">Item 3</div>
798 </div>
799
800 <div class="justify-title">justify-content: space-around</div>
801 <div class="justify-space-around">
802 <div class="demo-item">Item 1</div>
803 <div class="demo-item">Item 2</div>
804 <div class="demo-item">Item 3</div>
805 </div>
806 </div>
807 </div>
808 </section>
809
810 <!-- Align Items Examples -->
811 <section class="section">
812 <h2 class="section-title">🎯 Align Items (Cross Axis)</h2>
813 <div class="align-demo">
814 <div class="align-container animate-fade-in">
815 <div class="justify-title">align-items: flex-start</div>
816 <div class="align-flex-start">
817 <div class="align-item-1">Item 1</div>
818 <div class="align-item-2">Item 2</div>
819 <div class="align-item-3">Item 3</div>
820 </div>
821 </div>
822
823 <div class="align-container animate-fade-in">
824 <div class="justify-title">align-items: center</div>
825 <div class="align-center">
826 <div class="align-item-1">Item 1</div>
827 <div class="align-item-2">Item 2</div>
828 <div class="align-item-3">Item 3</div>
829 </div>
830 </div>
831
832 <div class="align-container animate-fade-in">
833 <div class="justify-title">align-items: flex-end</div>
834 <div class="align-flex-end">
835 <div class="align-item-1">Item 1</div>
836 <div class="align-item-2">Item 2</div>
837 <div class="align-item-3">Item 3</div>
838 </div>
839 </div>
840 </div>
841 </section>
842
843 <!-- Flex Properties Demo -->
844 <section id="properties" class="section">
845 <h2 class="section-title">⚡ Flex Item Properties</h2>
846 <div class="flex-properties animate-fade-in">
847 <h3 class="mb-2">Flex-Grow Demonstration</h3>
848 <p class="mb-4">Watch how items grow to fill available space based on their flex-grow values:</p>
849 <div class="flex-grow-demo">
850 <div class="grow-0">grow: 0<br>(Fixed)</div>
851 <div class="grow-1">grow: 1<br>(1 part)</div>
852 <div class="grow-2">grow: 2<br>(2 parts)</div>
853 </div>
854 <p>The middle item takes 1/3 of available space, the last item takes 2/3, and the first item stays fixed.</p>
855 </div>
856 </section>
857
858 <!-- Gap Demo -->
859 <section class="section">
860 <h2 class="section-title">📏 Modern Gap Property</h2>
861 <div class="gap-demo animate-fade-in">
862 <h3 class="mb-2">Consistent Spacing with Gap</h3>
863 <p class="mb-4">The gap property provides uniform spacing between flex items without margin calculations:</p>
864 <div class="gap-container">
865 <div class="gap-item">Item 1</div>
866 <div class="gap-item">Item 2</div>
867 <div class="gap-item">Item 3</div>
868 <div class="gap-item">Item 4</div>
869 </div>
870 </div>
871 </section>
872
873 <!-- Holy Grail Layout -->
874 <section class="section">
875 <h2 class="section-title">🏛️ Holy Grail Layout</h2>
876 <div class="holy-grail animate-fade-in">
877 <div class="holy-grail-header">
878 <div>Header Section</div>
879 <div>Navigation</div>
880 </div>
881 <div class="holy-grail-middle">
882 <div class="holy-grail-sidebar">
883 <h4>Left Sidebar</h4>
884 <p>Fixed width sidebar content. This area contains navigation links and secondary content.</p>
885 </div>
886 <div class="holy-grail-main">
887 <h3>Main Content Area</h3>
888 <p>This is the main content area that grows to fill available space. It's flexible and responsive, adapting to different screen sizes while maintaining proper layout structure.</p>
889 <p>The flexbox layout ensures this content area takes up all remaining space after the sidebars are accounted for.</p>
890 </div>
891 <div class="holy-grail-aside">
892 <h4>Right Aside</h4>
893 <p>Additional content area with fixed width.</p>
894 </div>
895 </div>
896 <div class="holy-grail-footer">
897 Footer content spans full width
898 </div>
899 </div>
900 </section>
901
902 <!-- Responsive Card Grid -->
903 <section id="layouts" class="section">
904 <h2 class="section-title">📱 Responsive Card Grid</h2>
905 <div class="card-grid">
906 <div class="card animate-fade-in">
907 <div class="card-header">
908 <div class="card-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">🚀</div>
909 <div class="card-title">Flexible Growth</div>
910 </div>
911 <div class="card-content">
912 Each card uses flex: 1 1 300px to grow and shrink responsively while maintaining a minimum width of 300px.
913 </div>
914 <div class="card-footer">
915 <button class="card-button">Learn More</button>
916 </div>
917 </div>
918
919 <div class="card animate-fade-in">
920 <div class="card-header">
921 <div class="card-icon" style="background: linear-gradient(135deg, #3b82f6, #1e40af);">📐</div>
922 <div class="card-title">Perfect Alignment</div>
923 </div>
924 <div class="card-content">
925 Cards automatically maintain equal heights thanks to flexbox default behavior, creating a professional grid layout.
926 </div>
927 <div class="card-footer">
928 <button class="card-button">Learn More</button>
929 </div>
930 </div>
931
932 <div class="card animate-fade-in">
933 <div class="card-header">
934 <div class="card-icon" style="background: linear-gradient(135deg, #10b981, #047857);">📱</div>
935 <div class="card-title">Mobile First</div>
936 </div>
937 <div class="card-content">
938 The grid automatically adapts to smaller screens, stacking cards vertically while maintaining proper spacing and proportions.
939 </div>
940 <div class="card-footer">
941 <button class="card-button">Learn More</button>
942 </div>
943 </div>
944 </div>
945 </section>
946
947 <!-- Summary Section -->
948 <section class="section text-center">
949 <h2 class="section-title">🎉 Flexbox Mastery Achieved!</h2>
950 <div style="background: white; border-radius: 16px; padding: 3rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08);">
951 <p style="font-size: 1.2rem; margin-bottom: 2rem; color: #64748b;">
952 You've mastered the most powerful layout system in modern CSS!
953 </p>
954
955 <div style="display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 2rem 0;">
956 <div style="background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 1rem 1.5rem; border-radius: 12px;">
957 <strong>✅ Container Control</strong><br>
958 <small>Direction, Wrap, Alignment</small>
959 </div>
960 <div style="background: linear-gradient(135deg, #3b82f6, #1e40af); color: white; padding: 1rem 1.5rem; border-radius: 12px;">
961 <strong>✅ Item Properties</strong><br>
962 <small>Grow, Shrink, Basis, Align</small>
963 </div>
964 <div style="background: linear-gradient(135deg, #10b981, #047857); color: white; padding: 1rem 1.5rem; border-radius: 12px;">
965 <strong>✅ Responsive Layouts</strong><br>
966 <small>Mobile-First, Adaptive</small>
967 </div>
968 <div style="background: linear-gradient(135deg, #f59e0b, #d97706); color: white; padding: 1rem 1.5rem; border-radius: 12px;">
969 <strong>✅ Real Applications</strong><br>
970 <small>Navigation, Cards, Layouts</small>
971 </div>
972 </div>
973 </div>
974 </section>
975 </div>
976
977 <script>
978 function toggleMenu() {
979 const menu = document.getElementById('navMenu');
980 menu.classList.toggle('active');
981 }
982
983 // Add intersection observer for animations
984 const observerOptions = {
985 threshold: 0.1,
986 rootMargin: '0px 0px -50px 0px'
987 };
988
989 const observer = new IntersectionObserver((entries) => {
990 entries.forEach(entry => {
991 if (entry.isIntersecting) {
992 entry.target.style.opacity = '1';
993 entry.target.style.transform = 'translateY(0)';
994 }
995 });
996 }, observerOptions);
997
998 // Observe all animated elements
999 document.querySelectorAll('.animate-fade-in').forEach(el => {
1000 el.style.opacity = '0';
1001 el.style.transform = 'translateY(20px)';
1002 el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
1003 observer.observe(el);
1004 });
1005 </script>
1006</body>
1007</html>This comprehensive Flexbox demonstration covers all essential concepts from Lesson 7:
🚀 Complete Flexbox Container Mastery:
📐 Advanced Alignment Techniques:
⚡ Flex Item Property Control:
🏛️ Complex Layout Systems:
📱 Responsive Design Integration:
This example demonstrates how Flexbox revolutionizes layout creation, making complex responsive designs intuitive and maintainable while providing precise control over alignment and space distribution.
Excellent work mastering Flexbox! You now have powerful one-dimensional layout control at your fingertips. Next, we'll dive into "CSS Grid Basics" where you'll learn two-dimensional layout techniques for creating complex grid systems with precise row and column control. Get ready to build sophisticated layouts!
Your progress is saved in this browser, on this device only.