Flexbox Fundamentals & Container Properties

INTERMEDIATE

Master flexbox container properties for powerful one-dimensional layouts. Learn display flex, flex direction, justify content, align items, and more.

45 min

Tutorial 1 of 10

Display Flex: Creating Flex Containers

The journey to flexbox mastery begins with understanding how to create flex containers and what happens when you do.

Creating a Flex Container

CSS

1.container {
2  display: flex; /* Creates flex container */
3}
4
5.inline-flex {
6  display: inline-flex; /* Creates inline flex container */
7}

**What Happens When You Apply display: flex:**

1. Establishes Flex Formatting Context

Direct children become flex items automatically
Items line up along the main axis (horizontal by default)
Items stretch to fill container height by default
Margin collapsing stops working inside flex containers

2. Default Flex Container Behavior

CSS

1.flex-container {
2  display: flex;
3  /* Default values applied automatically: */
4  flex-direction: row;        /* Horizontal main axis */
5  flex-wrap: nowrap;          /* Items stay on one line */
6  justify-content: flex-start; /* Items align to start */
7  align-items: stretch;       /* Items stretch to fill height */
8}

3. Flex vs Inline-Flex

CSS

1/* Block-level flex container */
2.flex-block {
3  display: flex;
4  width: 100%; /* Takes full width */
5}
6
7/* Inline flex container */
8.flex-inline {
9  display: inline-flex;
10  width: auto; /* Only as wide as content */
11}

Immediate Visual Changes:

Items align horizontally instead of stacking vertically
Items become same height automatically (stretch behavior)
Items respect their content width but can grow/shrink
Container becomes a powerful layout orchestrator

Best Practices:

Use display: flex for most layout scenarios
Use display: inline-flex when you need the container to be inline
Always remember that flex properties only work within flex containers
Test your layout with different amounts of content

Flex-Direction: Controlling Layout Axis

The flex-direction property defines the main axis of your flex container, determining how flex items are arranged and which direction they flow.

Understanding Axes in Flexbox:

Main Axis: The primary axis along which flex items are arranged

Cross Axis: The perpendicular axis to the main axis

Flex-Direction Values:

1. Row (Default) - Horizontal Flow

CSS

1.container {
2  display: flex;
3  flex-direction: row; /* Left to right */
4}
5
6/* Main axis: horizontal →
7   Cross axis: vertical ↓ */

2. Row-Reverse - Horizontal Reversed

CSS

1.container {
2  display: flex;
3  flex-direction: row-reverse; /* Right to left */
4}
5
6/* Main axis: horizontal ←
7   Cross axis: vertical ↓ */

3. Column - Vertical Flow

CSS

1.container {
2  display: flex;
3  flex-direction: column; /* Top to bottom */
4}
5
6/* Main axis: vertical ↓
7   Cross axis: horizontal → */

4. Column-Reverse - Vertical Reversed

CSS

1.container {
2  display: flex;
3  flex-direction: column-reverse; /* Bottom to top */
4}
5
6/* Main axis: vertical ↑
7   Cross axis: horizontal → */

Practical Applications:

Navigation Layouts:

CSS

1/* Horizontal navigation */
2.nav-horizontal {
3  display: flex;
4  flex-direction: row;
5}
6
7/* Vertical sidebar navigation */
8.nav-vertical {
9  display: flex;
10  flex-direction: column;
11}

Card Layouts:

CSS

1/* Card content stacked vertically */
2.card {
3  display: flex;
4  flex-direction: column;
5  height: 300px;
6}
7
8.card-image { flex: 0 0 auto; }
9.card-content { flex: 1; }
10.card-actions { flex: 0 0 auto; }

Responsive Direction Changes:

CSS

1.layout {
2  display: flex;
3  flex-direction: column;
4}
5
6@media (min-width: 768px) {
7  .layout {
8    flex-direction: row;
9  }
10}

Key Points:

Direction affects which properties control which axis
justify-content always works on the main axis
align-items always works on the cross axis
Changing direction changes how other flex properties behave
Use direction changes for responsive design transformations

Justify-Content: Main Axis Alignment

The justify-content property controls how flex items are distributed along the main axis, giving you precise control over spacing and alignment.

All Justify-Content Values:

1. Flex-Start (Default)

CSS

1.container {
2  display: flex;
3  justify-content: flex-start;
4  /* Items packed to start of main axis */
5}

2. Flex-End

CSS

1.container {
2  display: flex;
3  justify-content: flex-end;
4  /* Items packed to end of main axis */
5}

3. Center

CSS

1.container {
2  display: flex;
3  justify-content: center;
4  /* Items centered on main axis */
5}

4. Space-Between

CSS

1.container {
2  display: flex;
3  justify-content: space-between;
4  /* First and last items at edges, equal space between items */
5}

5. Space-Around

CSS

1.container {
2  display: flex;
3  justify-content: space-around;
4  /* Equal space around each item */
5}

6. Space-Evenly

CSS

1.container {
2  display: flex;
3  justify-content: space-evenly;
4  /* Equal space between and around items */
5}

Visual Comparison:

CSS

1/* [Item1][Item2][Item3] */
2justify-content: flex-start;
3
4/* [Item1][Item2][Item3] */
5justify-content: flex-end;
6
7/* [Item1][Item2][Item3] */
8justify-content: center;
9
10/* [Item1]    [Item2]    [Item3] */
11justify-content: space-between;
12
13/* [Item1]  [Item2]  [Item3] */
14justify-content: space-around;
15
16/* [Item1]   [Item2]   [Item3] */
17justify-content: space-evenly;

Practical Use Cases:

Navigation Bar:

CSS

1.navbar {
2  display: flex;
3  justify-content: space-between;
4}
5/* Logo on left, navigation on right */

Button Groups:

CSS

1.button-group {
2  display: flex;
3  justify-content: center;
4  gap: 1rem;
5}

Card Grid:

CSS

1.card-container {
2  display: flex;
3  justify-content: space-evenly;
4  flex-wrap: wrap;
5}

Form Actions:

CSS

1.form-actions {
2  display: flex;
3  justify-content: flex-end;
4  gap: 0.5rem;
5}

Responsive Justification:

CSS

1.responsive-nav {
2  display: flex;
3  justify-content: center;
4}
5
6@media (min-width: 768px) {
7  .responsive-nav {
8    justify-content: space-between;
9  }
10}

Pro Tips:

Use space-between for navigation with logo and menu
Use center for hero sections and call-to-action areas
Use space-evenly for equal distribution of items
Combine with gap property for consistent spacing
Remember: justify-content only works when there's extra space

Align-Items: Cross Axis Alignment

The align-items property controls how flex items are aligned along the cross axis, giving you perfect vertical (or horizontal) alignment control.

All Align-Items Values:

1. Stretch (Default)

CSS

1.container {
2  display: flex;
3  align-items: stretch;
4  /* Items stretch to fill cross axis */
5}

2. Flex-Start

CSS

1.container {
2  display: flex;
3  align-items: flex-start;
4  /* Items align to start of cross axis */
5}

3. Flex-End

CSS

1.container {
2  display: flex;
3  align-items: flex-end;
4  /* Items align to end of cross axis */
5}

4. Center

CSS

1.container {
2  display: flex;
3  align-items: center;
4  /* Items centered on cross axis */
5}

5. Baseline

CSS

1.container {
2  display: flex;
3  align-items: baseline;
4  /* Items align to text baseline */
5}

Perfect Centering Combination:

CSS

1.perfect-center {
2  display: flex;
3  justify-content: center; /* Horizontal centering */
4  align-items: center;     /* Vertical centering */
5  min-height: 100vh;       /* Full viewport height */
6}

Practical Applications:

Card Layouts:

CSS

1.card {
2  display: flex;
3  flex-direction: column;
4  align-items: stretch; /* Full width content */
5}
6
7.card-actions {
8  display: flex;
9  justify-content: flex-end;
10  align-items: center; /* Vertically center buttons */
11}

Navigation Items:

CSS

1.nav {
2  display: flex;
3  justify-content: space-between;
4  align-items: center; /* Vertically center logo and menu */
5  height: 60px;
6}

Icon and Text Combinations:

CSS

1.icon-text {
2  display: flex;
3  align-items: center;
4  gap: 8px;
5}
6
7.icon-text .icon {
8  flex: 0 0 auto;
9}
10
11.icon-text .text {
12  flex: 1;
13}

Different Heights Handling:

CSS

1.mixed-heights {
2  display: flex;
3  align-items: flex-end; /* Align to bottom */
4}
5
6.mixed-heights .item {
7  padding: 1rem;
8  background: #f0f0f0;
9}

Baseline Alignment for Text:

CSS

1.text-elements {
2  display: flex;
3  align-items: baseline;
4}
5
6.large-text { font-size: 2rem; }
7.small-text { font-size: 1rem; }

Responsive Alignment:

CSS

1.hero {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  text-align: center;
6}
7
8@media (min-width: 768px) {
9  .hero {
10    flex-direction: row;
11    align-items: center;
12    text-align: left;
13  }
14}

Cross Axis Considerations:

In flex-direction: row → cross axis is vertical
In flex-direction: column → cross axis is horizontal
align-items: stretch only works when items don't have fixed cross-axis size
Use align-items: center for the most common vertical centering needs
Baseline alignment is perfect for text elements of different sizes

Flexbox Container Properties - Complete Layout System

A comprehensive demonstration of all flexbox container properties working together to create professional layouts.

Example CodeHTML

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 Container Properties - Complete System</title>
7    <style>
8        /* =================
9           RESET & BASE STYLES
10           ================= */
11        * {
12            margin: 0;
13            padding: 0;
14            box-sizing: border-box;
15        }
16
17        body {
18            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
19            line-height: 1.6;
20            color: #333;
21            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
22            min-height: 100vh;
23        }
24
25        .container {
26            max-width: 1200px;
27            margin: 0 auto;
28            padding: 20px;
29        }
30
31        /* =================
32           DEMO CARDS SYSTEM
33           ================= */
34        .demo-card {
35            background: rgba(255, 255, 255, 0.95);
36            border-radius: 12px;
37            padding: 2rem;
38            margin-bottom: 2rem;
39            backdrop-filter: blur(10px);
40            border: 1px solid rgba(255, 255, 255, 0.2);
41            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
42        }
43
44        .demo-card h2 {
45            color: #2563eb;
46            margin-bottom: 1rem;
47            font-size: 1.5rem;
48            border-bottom: 2px solid #e5e7eb;
49            padding-bottom: 0.5rem;
50        }
51
52        .demo-card p {
53            margin-bottom: 1rem;
54            color: #6b7280;
55            font-size: 0.95rem;
56        }
57
58        /* =================
59           FLEX ITEMS STYLING
60           ================= */
61        .flex-item {
62            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
63            color: white;
64            padding: 1rem;
65            border-radius: 8px;
66            text-align: center;
67            font-weight: 600;
68            margin: 4px;
69            min-width: 80px;
70            box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
71            transition: all 0.3s ease;
72        }
73
74        .flex-item:hover {
75            transform: translateY(-2px);
76            box-shadow: 0 8px 15px rgba(59, 130, 246, 0.4);
77        }
78
79        .flex-item.variant-1 {
80            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
81        }
82
83        .flex-item.variant-2 {
84            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
85        }
86
87        .flex-item.variant-3 {
88            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
89        }
90
91        .flex-item.tall {
92            padding: 2rem 1rem;
93        }
94
95        .flex-item.wide {
96            min-width: 150px;
97        }
98
99        /* =================
100           DISPLAY FLEX DEMOS
101           ================= */
102        .display-demo {
103            border: 2px dashed #9ca3af;
104            padding: 1rem;
105            margin: 1rem 0;
106            border-radius: 8px;
107            background: rgba(249, 250, 251, 0.8);
108        }
109
110        .flex-container {
111            display: flex;
112        }
113
114        .inline-flex-container {
115            display: inline-flex;
116            margin-right: 1rem;
117            border: 2px solid #6366f1;
118        }
119
120        /* =================
121           FLEX DIRECTION DEMOS
122           ================= */
123        .direction-row {
124            display: flex;
125            flex-direction: row;
126        }
127
128        .direction-row-reverse {
129            display: flex;
130            flex-direction: row-reverse;
131        }
132
133        .direction-column {
134            display: flex;
135            flex-direction: column;
136            max-width: 200px;
137        }
138
139        .direction-column-reverse {
140            display: flex;
141            flex-direction: column-reverse;
142            max-width: 200px;
143        }
144
145        /* =================
146           JUSTIFY CONTENT DEMOS
147           ================= */
148        .justify-flex-start {
149            display: flex;
150            justify-content: flex-start;
151            background: rgba(59, 130, 246, 0.1);
152            padding: 1rem;
153            margin: 0.5rem 0;
154            border-radius: 8px;
155        }
156
157        .justify-flex-end {
158            display: flex;
159            justify-content: flex-end;
160            background: rgba(16, 185, 129, 0.1);
161            padding: 1rem;
162            margin: 0.5rem 0;
163            border-radius: 8px;
164        }
165
166        .justify-center {
167            display: flex;
168            justify-content: center;
169            background: rgba(245, 158, 11, 0.1);
170            padding: 1rem;
171            margin: 0.5rem 0;
172            border-radius: 8px;
173        }
174
175        .justify-space-between {
176            display: flex;
177            justify-content: space-between;
178            background: rgba(239, 68, 68, 0.1);
179            padding: 1rem;
180            margin: 0.5rem 0;
181            border-radius: 8px;
182        }
183
184        .justify-space-around {
185            display: flex;
186            justify-content: space-around;
187            background: rgba(139, 92, 246, 0.1);
188            padding: 1rem;
189            margin: 0.5rem 0;
190            border-radius: 8px;
191        }
192
193        .justify-space-evenly {
194            display: flex;
195            justify-content: space-evenly;
196            background: rgba(236, 72, 153, 0.1);
197            padding: 1rem;
198            margin: 0.5rem 0;
199            border-radius: 8px;
200        }
201
202        /* =================
203           ALIGN ITEMS DEMOS
204           ================= */
205        .align-demo-container {
206            height: 120px;
207            margin: 0.5rem 0;
208            padding: 1rem;
209            border-radius: 8px;
210        }
211
212        .align-stretch {
213            display: flex;
214            align-items: stretch;
215            background: rgba(59, 130, 246, 0.1);
216        }
217
218        .align-flex-start {
219            display: flex;
220            align-items: flex-start;
221            background: rgba(16, 185, 129, 0.1);
222        }
223
224        .align-flex-end {
225            display: flex;
226            align-items: flex-end;
227            background: rgba(245, 158, 11, 0.1);
228        }
229
230        .align-center {
231            display: flex;
232            align-items: center;
233            background: rgba(239, 68, 68, 0.1);
234        }
235
236        .align-baseline {
237            display: flex;
238            align-items: baseline;
239            background: rgba(139, 92, 246, 0.1);
240        }
241
242        .align-baseline .flex-item {
243            font-size: var(--font-size, 1rem);
244        }
245
246        /* =================
247           PRACTICAL LAYOUTS
248           ================= */
249        .navbar {
250            display: flex;
251            justify-content: space-between;
252            align-items: center;
253            background: rgba(31, 41, 55, 0.9);
254            color: white;
255            padding: 1rem 2rem;
256            border-radius: 8px;
257            margin-bottom: 1rem;
258            backdrop-filter: blur(10px);
259        }
260
261        .navbar-brand {
262            font-size: 1.25rem;
263            font-weight: bold;
264        }
265
266        .navbar-nav {
267            display: flex;
268            gap: 1rem;
269            list-style: none;
270        }
271
272        .navbar-nav a {
273            color: white;
274            text-decoration: none;
275            padding: 0.5rem 1rem;
276            border-radius: 4px;
277            transition: all 0.3s ease;
278        }
279
280        .navbar-nav a:hover {
281            background: rgba(255, 255, 255, 0.1);
282        }
283
284        .hero-section {
285            display: flex;
286            flex-direction: column;
287            justify-content: center;
288            align-items: center;
289            height: 200px;
290            background: rgba(99, 102, 241, 0.1);
291            border-radius: 12px;
292            text-align: center;
293            margin-bottom: 2rem;
294        }
295
296        .hero-title {
297            font-size: 2rem;
298            color: #1e293b;
299            margin-bottom: 1rem;
300        }
301
302        .hero-subtitle {
303            color: #64748b;
304            font-size: 1.1rem;
305        }
306
307        .card-grid {
308            display: flex;
309            justify-content: space-evenly;
310            flex-wrap: wrap;
311            gap: 1rem;
312            margin-top: 2rem;
313        }
314
315        .feature-card {
316            background: white;
317            padding: 1.5rem;
318            border-radius: 8px;
319            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
320            flex: 1;
321            min-width: 250px;
322            max-width: 300px;
323        }
324
325        .feature-card h3 {
326            color: #1e40af;
327            margin-bottom: 0.5rem;
328        }
329
330        .feature-card p {
331            color: #6b7280;
332            font-size: 0.9rem;
333        }
334
335        /* =================
336           INTERACTIVE CONTROLS
337           ================= */
338        .control-panel {
339            background: rgba(15, 23, 42, 0.9);
340            color: white;
341            padding: 1rem;
342            border-radius: 8px;
343            margin: 1rem 0;
344            backdrop-filter: blur(10px);
345        }
346
347        .control-group {
348            margin-bottom: 1rem;
349        }
350
351        .control-group label {
352            display: block;
353            margin-bottom: 0.5rem;
354            font-weight: 600;
355        }
356
357        .control-group select,
358        .control-group input {
359            width: 100%;
360            padding: 0.5rem;
361            border: 1px solid #374151;
362            border-radius: 4px;
363            background: #1f2937;
364            color: white;
365        }
366
367        .playground {
368            border: 2px dashed #6366f1;
369            padding: 1rem;
370            border-radius: 8px;
371            background: rgba(255, 255, 255, 0.9);
372            min-height: 150px;
373            transition: all 0.3s ease;
374        }
375
376        /* =================
377           RESPONSIVE DESIGN
378           ================= */
379        @media (max-width: 768px) {
380            .container {
381                padding: 10px;
382            }
383
384            .demo-card {
385                padding: 1rem;
386            }
387
388            .navbar {
389                flex-direction: column;
390                gap: 1rem;
391                text-align: center;
392            }
393
394            .card-grid {
395                justify-content: center;
396            }
397
398            .direction-column,
399            .direction-column-reverse {
400                max-width: 100%;
401            }
402        }
403
404        /* =================
405           UTILITY CLASSES
406           ================= */
407        .mb-2 { margin-bottom: 1rem; }
408        .mt-2 { margin-top: 1rem; }
409        .text-center { text-align: center; }
410        .font-bold { font-weight: bold; }
411    </style>
412</head>
413<body>
414    <div class="container">
415        <!-- Hero Section with Perfect Centering -->
416        <div class="hero-section">
417            <h1 class="hero-title">🚀 Flexbox Container Properties</h1>
418            <p class="hero-subtitle">Master the fundamentals of flexible layouts</p>
419        </div>
420
421        <!-- Navigation Example -->
422        <nav class="navbar">
423            <div class="navbar-brand">FlexLogo</div>
424            <ul class="navbar-nav">
425                <li><a href="#">Home</a></li>
426                <li><a href="#">About</a></li>
427                <li><a href="#">Services</a></li>
428                <li><a href="#">Contact</a></li>
429            </ul>
430        </nav>
431
432        <!-- Display Flex Demo -->
433        <div class="demo-card">
434            <h2>1. Display Flex - Creating Flex Containers</h2>
435            <p>The <code>display: flex</code> property transforms any element into a flex container.</p>
436            
437            <div class="display-demo">
438                <h4>Block vs Inline Flex:</h4>
439                <div class="inline-flex-container">
440                    <div class="flex-item">Inline</div>
441                    <div class="flex-item">Flex</div>
442                </div>
443                <div class="inline-flex-container">
444                    <div class="flex-item">Container</div>
445                </div>
446            </div>
447
448            <div class="display-demo">
449                <h4>Full Width Flex Container:</h4>
450                <div class="flex-container">
451                    <div class="flex-item">Item 1</div>
452                    <div class="flex-item variant-1">Item 2</div>
453                    <div class="flex-item variant-2">Item 3</div>
454                </div>
455            </div>
456        </div>
457
458        <!-- Flex Direction Demo -->
459        <div class="demo-card">
460            <h2>2. Flex-Direction - Controlling Layout Axis</h2>
461            <p>Controls the direction of the main axis and how flex items are arranged.</p>
462            
463            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem;">
464                <div>
465                    <h4>Row (Default):</h4>
466                    <div class="display-demo direction-row">
467                        <div class="flex-item">1</div>
468                        <div class="flex-item">2</div>
469                        <div class="flex-item">3</div>
470                    </div>
471                </div>
472                
473                <div>
474                    <h4>Row-Reverse:</h4>
475                    <div class="display-demo direction-row-reverse">
476                        <div class="flex-item">1</div>
477                        <div class="flex-item">2</div>
478                        <div class="flex-item">3</div>
479                    </div>
480                </div>
481                
482                <div>
483                    <h4>Column:</h4>
484                    <div class="display-demo direction-column">
485                        <div class="flex-item">1</div>
486                        <div class="flex-item">2</div>
487                        <div class="flex-item">3</div>
488                    </div>
489                </div>
490                
491                <div>
492                    <h4>Column-Reverse:</h4>
493                    <div class="display-demo direction-column-reverse">
494                        <div class="flex-item">1</div>
495                        <div class="flex-item">2</div>
496                        <div class="flex-item">3</div>
497                    </div>
498                </div>
499            </div>
500        </div>
501
502        <!-- Justify Content Demo -->
503        <div class="demo-card">
504            <h2>3. Justify-Content - Main Axis Alignment</h2>
505            <p>Controls how flex items are distributed along the main axis.</p>
506            
507            <div>
508                <h4>Flex-Start (default):</h4>
509                <div class="justify-flex-start">
510                    <div class="flex-item">A</div>
511                    <div class="flex-item">B</div>
512                    <div class="flex-item">C</div>
513                </div>
514                
515                <h4>Flex-End:</h4>
516                <div class="justify-flex-end">
517                    <div class="flex-item variant-1">A</div>
518                    <div class="flex-item variant-1">B</div>
519                    <div class="flex-item variant-1">C</div>
520                </div>
521                
522                <h4>Center:</h4>
523                <div class="justify-center">
524                    <div class="flex-item variant-2">A</div>
525                    <div class="flex-item variant-2">B</div>
526                    <div class="flex-item variant-2">C</div>
527                </div>
528                
529                <h4>Space-Between:</h4>
530                <div class="justify-space-between">
531                    <div class="flex-item variant-3">A</div>
532                    <div class="flex-item variant-3">B</div>
533                    <div class="flex-item variant-3">C</div>
534                </div>
535                
536                <h4>Space-Around:</h4>
537                <div class="justify-space-around">
538                    <div class="flex-item">A</div>
539                    <div class="flex-item">B</div>
540                    <div class="flex-item">C</div>
541                </div>
542                
543                <h4>Space-Evenly:</h4>
544                <div class="justify-space-evenly">
545                    <div class="flex-item variant-1">A</div>
546                    <div class="flex-item variant-1">B</div>
547                    <div class="flex-item variant-1">C</div>
548                </div>
549            </div>
550        </div>
551
552        <!-- Align Items Demo -->
553        <div class="demo-card">
554            <h2>4. Align-Items - Cross Axis Alignment</h2>
555            <p>Controls how flex items are aligned along the cross axis.</p>
556            
557            <div>
558                <h4>Stretch (default):</h4>
559                <div class="align-demo-container align-stretch">
560                    <div class="flex-item">A</div>
561                    <div class="flex-item">B</div>
562                    <div class="flex-item">C</div>
563                </div>
564                
565                <h4>Flex-Start:</h4>
566                <div class="align-demo-container align-flex-start">
567                    <div class="flex-item variant-1">A</div>
568                    <div class="flex-item variant-1 tall">B</div>
569                    <div class="flex-item variant-1">C</div>
570                </div>
571                
572                <h4>Flex-End:</h4>
573                <div class="align-demo-container align-flex-end">
574                    <div class="flex-item variant-2">A</div>
575                    <div class="flex-item variant-2 tall">B</div>
576                    <div class="flex-item variant-2">C</div>
577                </div>
578                
579                <h4>Center:</h4>
580                <div class="align-demo-container align-center">
581                    <div class="flex-item variant-3">A</div>
582                    <div class="flex-item variant-3 tall">B</div>
583                    <div class="flex-item variant-3">C</div>
584                </div>
585                
586                <h4>Baseline:</h4>
587                <div class="align-demo-container align-baseline">
588                    <div class="flex-item" style="--font-size: 0.8rem;">Small</div>
589                    <div class="flex-item" style="--font-size: 1.5rem;">Large</div>
590                    <div class="flex-item" style="--font-size: 1rem;">Normal</div>
591                </div>
592            </div>
593        </div>
594
595        <!-- Interactive Playground -->
596        <div class="demo-card">
597            <h2>5. 🎮 Interactive Flexbox Playground</h2>
598            <p>Experiment with different combinations of flexbox properties:</p>
599            
600            <div class="control-panel">
601                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
602                    <div class="control-group">
603                        <label for="flexDirection">Flex Direction:</label>
604                        <select id="flexDirection" onchange="updatePlayground()">
605                            <option value="row">row</option>
606                            <option value="row-reverse">row-reverse</option>
607                            <option value="column">column</option>
608                            <option value="column-reverse">column-reverse</option>
609                        </select>
610                    </div>
611                    
612                    <div class="control-group">
613                        <label for="justifyContent">Justify Content:</label>
614                        <select id="justifyContent" onchange="updatePlayground()">
615                            <option value="flex-start">flex-start</option>
616                            <option value="flex-end">flex-end</option>
617                            <option value="center">center</option>
618                            <option value="space-between">space-between</option>
619                            <option value="space-around">space-around</option>
620                            <option value="space-evenly">space-evenly</option>
621                        </select>
622                    </div>
623                    
624                    <div class="control-group">
625                        <label for="alignItems">Align Items:</label>
626                        <select id="alignItems" onchange="updatePlayground()">
627                            <option value="stretch">stretch</option>
628                            <option value="flex-start">flex-start</option>
629                            <option value="flex-end">flex-end</option>
630                            <option value="center">center</option>
631                            <option value="baseline">baseline</option>
632                        </select>
633                    </div>
634                    
635                    <div class="control-group">
636                        <label for="containerHeight">Container Height:</label>
637                        <input type="range" id="containerHeight" min="100" max="300" value="150" onchange="updatePlayground()">
638                        <span id="heightValue">150px</span>
639                    </div>
640                </div>
641            </div>
642            
643            <div id="playground" class="playground" style="height: 150px;">
644                <div class="flex-item">Item 1</div>
645                <div class="flex-item variant-1">Item 2</div>
646                <div class="flex-item variant-2 tall">Item 3</div>
647                <div class="flex-item variant-3">Item 4</div>
648            </div>
649            
650            <div style="margin-top: 1rem; padding: 1rem; background: rgba(15, 23, 42, 0.05); border-radius: 8px;">
651                <strong>Current CSS:</strong>
652                <pre id="cssOutput" style="margin-top: 0.5rem; color: #1e293b; font-family: 'Courier New', monospace; font-size: 0.9rem;">display: flex;
653flex-direction: row;
654justify-content: flex-start;
655align-items: stretch;
656height: 150px;</pre>
657            </div>
658        </div>
659
660        <!-- Feature Cards -->
661        <div class="card-grid">
662            <div class="feature-card">
663                <h3>🎯 Precise Control</h3>
664                <p>Flexbox gives you exact control over alignment, distribution, and spacing of elements along one axis.</p>
665            </div>
666            <div class="feature-card">
667                <h3>📱 Responsive by Nature</h3>
668                <p>Flex items automatically adapt to different screen sizes and container widths without media queries.</p>
669            </div>
670            <div class="feature-card">
671                <h3>⚡ Performance Focused</h3>
672                <p>Modern browsers have optimized flexbox rendering, making it fast and efficient for complex layouts.</p>
673            </div>
674        </div>
675
676        <!-- Summary Section -->
677        <div class="demo-card text-center">
678            <h2>🎉 Flexbox Container Mastery Achieved!</h2>
679            <p class="mb-2">You've now mastered the four essential flexbox container properties that control layout behavior:</p>
680            <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1rem; margin-top: 2rem;">
681                <div class="flex-item" style="flex: 1; min-width: 200px;">
682                    <strong>display: flex</strong><br>
683                    Creates flex container
684                </div>
685                <div class="flex-item variant-1" style="flex: 1; min-width: 200px;">
686                    <strong>flex-direction</strong><br>
687                    Controls main axis
688                </div>
689                <div class="flex-item variant-2" style="flex: 1; min-width: 200px;">
690                    <strong>justify-content</strong><br>
691                    Aligns on main axis
692                </div>
693                <div class="flex-item variant-3" style="flex: 1; min-width: 200px;">
694                    <strong>align-items</strong><br>
695                    Aligns on cross axis
696                </div>
697            </div>
698        </div>
699    </div>
700
701    <script>
702        // Interactive playground functionality
703        function updatePlayground() {
704            const playground = document.getElementById('playground');
705            const flexDirection = document.getElementById('flexDirection').value;
706            const justifyContent = document.getElementById('justifyContent').value;
707            const alignItems = document.getElementById('alignItems').value;
708            const containerHeight = document.getElementById('containerHeight').value;
709            
710            // Update height display
711            document.getElementById('heightValue').textContent = containerHeight + 'px';
712            
713            // Apply styles
714            playground.style.display = 'flex';
715            playground.style.flexDirection = flexDirection;
716            playground.style.justifyContent = justifyContent;
717            playground.style.alignItems = alignItems;
718            playground.style.height = containerHeight + 'px';
719            
720            // Update CSS output
721            const cssOutput = document.getElementById('cssOutput');
722            cssOutput.textContent = `display: flex;
723flex-direction: ${flexDirection};
724justify-content: ${justifyContent};
725align-items: ${alignItems};
726height: ${containerHeight}px;`;
727        }
728        
729        // Initialize playground
730        updatePlayground();
731        
732        // Add some interactive feedback
733        document.addEventListener('DOMContentLoaded', function() {
734            const flexItems = document.querySelectorAll('.flex-item');
735            
736            flexItems.forEach(item => {
737                item.addEventListener('click', function() {
738                    this.style.transform = 'scale(0.95)';
739                    setTimeout(() => {
740                        this.style.transform = '';
741                    }, 150);
742                });
743            });
744            
745            console.log('🚀 Flexbox Container Properties lesson loaded successfully!');
746            console.log('💡 Try the interactive playground to experiment with different combinations!');
747        });
748        
749        // Responsive demo alerts
750        function showResponsiveDemo() {
751            const navbar = document.querySelector('.navbar');
752            const isColumn = window.innerWidth <= 768;
753            
754            if (isColumn) {
755                console.log('📱 Responsive behavior: Navbar switched to column layout!');
756            }
757        }
758        
759        window.addEventListener('resize', showResponsiveDemo);
760    </script>
761</body>
762</html>

How It Works

This comprehensive demonstration showcases every aspect of Flexbox Container Properties covered in Lesson 1:

🎯 Complete Container Property Coverage:

1. Display Flex Foundation:

Visual comparison between block and inline-flex containers
Demonstration of how display: flex transforms layout behavior
Shows immediate effects: horizontal alignment and equal heights
Practical examples with real navigation and layout components

2. Flex-Direction Mastery:

All four direction values demonstrated with visual examples
Row: Default horizontal flow with left-to-right arrangement
Row-reverse: Horizontal flow with right-to-left arrangement
Column: Vertical flow with top-to-bottom stacking
Column-reverse: Vertical flow with bottom-to-top arrangement
Interactive grid showing all directions simultaneously

3. Justify-Content Precision:

Complete coverage of all six alignment options
Flex-start: Items packed to beginning of main axis
Flex-end: Items packed to end of main axis
Center: Items centered along main axis
Space-between: Maximum space between items, no edge spacing
Space-around: Equal space around each item
Space-evenly: Perfectly equal spacing between and around items
Color-coded backgrounds to visualize different behaviors

4. Align-Items Control:

All five cross-axis alignment options demonstrated
Stretch: Items fill full cross-axis height (default behavior)
Flex-start: Items align to cross-axis start
Flex-end: Items align to cross-axis end
Center: Perfect cross-axis centering
Baseline: Text baseline alignment for typography
Different item heights to show alignment effects clearly

5. Interactive Learning Playground:

Live property manipulation with immediate visual feedback
Dropdown controls for flex-direction, justify-content, and align-items
Height slider to see cross-axis alignment behavior
Real-time CSS code generation showing exact property values
Responsive controls that work on all screen sizes

6. Practical Real-World Examples:

Navigation Bar: Perfect space-between layout with centered items
Hero Section: Column direction with perfect centering
Feature Cards: Space-evenly distribution with responsive wrapping
Interactive Elements: Hover effects and click feedback

7. Responsive Design Integration:

Mobile-first approach with tablet and desktop enhancements
Navigation transforms from horizontal to vertical stack on small screens
Card grid adapts from space-evenly to centered alignment
Flex direction changes create completely different layouts

8. Professional Polish:

Glass morphism design with backdrop filters and transparency
Gradient backgrounds and sophisticated color schemes
Smooth animations and transitions for all interactive elements
Accessibility considerations with proper focus management

9. Educational Features:

Color coding to distinguish different property demonstrations
Clear labeling and explanations for each layout behavior
Progressive complexity from basic concepts to advanced combinations
Interactive elements that encourage experimentation

10. Performance Optimizations:

Efficient CSS using modern properties and minimal code
Hardware-accelerated transforms for smooth animations
Optimized selectors and minimal DOM manipulation
Responsive images and scalable design patterns

This demonstration serves as both a comprehensive learning tool and practical reference guide, showing how flexbox container properties combine to create sophisticated, responsive layouts that work beautifully across all devices and screen sizes.

CSS

Flexbox Fundamentals & Container Properties

Learning Objectives

Introduction

Display Flex: Creating Flex Containers

Flex-Direction: Controlling Layout Axis

Justify-Content: Main Axis Alignment

Align-Items: Cross Axis Alignment

Flexbox Container Properties - Complete Layout System

How It Works

Key Takeaways

What's Next?

Table of Contents