Flex Items & Advanced Flexbox

INTERMEDIATE

Master flex item properties and advanced flexbox techniques for complex layouts. Learn flex-grow, flex-shrink, flex-basis, align-self, and order property.

50 min

Tutorial 2 of 10

Flex-Grow: Controlling Item Expansion

The flex-grow property determines how much a flex item should grow relative to other flex items when there's extra space in the flex container.

Understanding Flex-Grow Values:

Default Value: 0

CSS

1.item {
2  flex-grow: 0; /* Default - item won't grow */
3}

Equal Growth: flex-grow: 1

CSS

1.item {
2  flex-grow: 1; /* Item grows to fill available space */
3}
4
5/* All items with flex-grow: 1 will share space equally */
6.item1, .item2, .item3 {
7  flex-grow: 1;
8}

Proportional Growth

CSS

1.sidebar {
2  flex-grow: 1; /* Takes 1 part */
3}
4
5.main-content {
6  flex-grow: 2; /* Takes 2 parts - twice as much space */
7}
8
9.aside {
10  flex-grow: 1; /* Takes 1 part */
11}
12
13/* Ratio: 1:2:1 - main content gets 50% of extra space */

Advanced Growth Patterns:

Progressive Growth

CSS

1.item-small { flex-grow: 1; }
2.item-medium { flex-grow: 2; }
3.item-large { flex-grow: 3; }
4.item-xl { flex-grow: 4; }

Responsive Growth

CSS

1.responsive-item {
2  flex-grow: 1;
3}
4
5@media (min-width: 768px) {
6  .responsive-item {
7    flex-grow: 2; /* Grows more on larger screens */
8  }
9}

Common Layout Patterns:

Dashboard Layout

CSS

1.dashboard {
2  display: flex;
3}
4
5.sidebar {
6  flex-grow: 0; /* Fixed size */
7  width: 250px;
8}
9
10.main-area {
11  flex-grow: 1; /* Takes all remaining space */
12}

Card Layout

CSS

1.card-container {
2  display: flex;
3  gap: 1rem;
4}
5
6.card {
7  flex-grow: 1; /* Cards share space equally */
8  min-width: 200px; /* Minimum width constraint */
9}

Navigation with Search

CSS

1.navbar {
2  display: flex;
3  align-items: center;
4}
5
6.logo { flex-grow: 0; }
7.nav-links { flex-grow: 0; }
8.search-bar { flex-grow: 1; } /* Search takes remaining space */
9.user-menu { flex-grow: 0; }

Key Concepts:

flex-grow: 0 = Item maintains its natural width
flex-grow: 1 = Item grows to fill available space
Higher numbers = proportionally larger growth
Growth only happens when there's extra space
Works along the main axis direction
Essential for responsive layouts that adapt to container size

Flex-Shrink: Controlling Item Compression

The flex-shrink property determines how much a flex item should shrink relative to other flex items when there's insufficient space in the flex container.

Understanding Flex-Shrink Values:

Default Value: 1

CSS

1.item {
2  flex-shrink: 1; /* Default - item can shrink */
3}

Prevent Shrinking: flex-shrink: 0

CSS

1.fixed-item {
2  flex-shrink: 0; /* Item maintains its size */
3  width: 200px;
4}

Proportional Shrinking

CSS

1.text-content {
2  flex-shrink: 2; /* Shrinks twice as much */
3}
4
5.image-content {
6  flex-shrink: 1; /* Standard shrinking */
7}
8
9.button-area {
10  flex-shrink: 0; /* Never shrinks */
11}

Practical Shrinking Scenarios:

Responsive Navigation

CSS

1.nav-container {
2  display: flex;
3}
4
5.logo {
6  flex-shrink: 0; /* Logo never shrinks */
7  width: 120px;
8}
9
10.nav-links {
11  flex-shrink: 1; /* Links can compress */
12}
13
14.cta-button {
15  flex-shrink: 0; /* Button stays visible */
16}

Card Layout Protection

CSS

1.card {
2  display: flex;
3  flex-direction: column;
4}
5
6.card-image {
7  flex-shrink: 0; /* Image maintains aspect ratio */
8  height: 200px;
9}
10
11.card-content {
12  flex-shrink: 1; /* Content can compress */
13}
14
15.card-actions {
16  flex-shrink: 0; /* Buttons always visible */
17}

Dashboard Sidebar

CSS

1.layout {
2  display: flex;
3}
4
5.sidebar {
6  flex-shrink: 0; /* Sidebar maintains minimum width */
7  min-width: 200px;
8  width: 250px;
9}
10
11.main-content {
12  flex-shrink: 1; /* Content area shrinks when needed */
13  min-width: 300px; /* But not below this */
14}

Advanced Shrinking Strategies:

Priority-Based Shrinking

CSS

1.high-priority {
2  flex-shrink: 0; /* Never shrinks */
3}
4
5.medium-priority {
6  flex-shrink: 1; /* Shrinks normally */
7}
8
9.low-priority {
10  flex-shrink: 3; /* Shrinks quickly */
11}

Text vs Visual Content

CSS

1.text-block {
2  flex-shrink: 2; /* Text can compress more */
3}
4
5.visual-block {
6  flex-shrink: 1; /* Images/visuals shrink less */
7}
8
9.critical-info {
10  flex-shrink: 0; /* Important info never shrinks */
11}

Mobile-First Shrinking

CSS

1.mobile-item {
2  flex-shrink: 1; /* Normal shrinking on mobile */
3}
4
5@media (min-width: 768px) {
6  .mobile-item {
7    flex-shrink: 0; /* No shrinking on larger screens */
8  }
9}

Shrinking with Overflow Control

CSS

1.shrinkable-text {
2  flex-shrink: 1;
3  min-width: 0; /* Allows text to shrink below content width */
4  overflow: hidden;
5  text-overflow: ellipsis;
6  white-space: nowrap;
7}

Common Mistakes to Avoid:

Not setting flex-shrink: 0 on elements that shouldn't shrink (like logos)
Forgetting that shrinking can make text unreadable
Not considering minimum widths with shrinking items
Allowing critical UI elements to shrink away
Not testing shrink behavior at small container sizes

Best Practices:

Use flex-shrink: 0 for logos, buttons, and critical elements
Allow content areas to shrink with flex-shrink: 1
Set higher shrink values for less important content
Always set minimum widths for shrinking items
Test responsive behavior at various screen sizes

Flex-Basis: Setting Initial Item Size

The flex-basis property defines the initial size of a flex item before free space is distributed. It's like setting a starting point for flex-grow and flex-shrink calculations.

Understanding Flex-Basis Values:

Auto (Default)

CSS

1.item {
2  flex-basis: auto; /* Uses item's content size */
3}

Specific Sizes

CSS

1.item {
2  flex-basis: 200px; /* Starts at 200px width/height */
3  flex-basis: 50%; /* Starts at 50% of container */
4  flex-basis: 20rem; /* Starts at 20rem */
5}

Content-Based Sizing

CSS

1.item {
2  flex-basis: content; /* Uses intrinsic content size */
3  flex-basis: max-content; /* Uses maximum content width */
4  flex-basis: min-content; /* Uses minimum content width */
5}

Flex-Basis vs Width/Height:

Traditional Approach

CSS

1.item {
2  width: 200px; /* Fixed width */
3}

Flexbox Approach

CSS

1.item {
2  flex-basis: 200px; /* Starting size, can grow/shrink */
3  flex-grow: 1;
4  flex-shrink: 1;
5}

Practical Applications:

Equal Column Layout

CSS

1.three-column {
2  display: flex;
3}
4
5.column {
6  flex-basis: 33.333%; /* Each starts at 1/3 width */
7  flex-grow: 1;
8  flex-shrink: 1;
9}

Sidebar + Main Layout

CSS

1.layout {
2  display: flex;
3}
4
5.sidebar {
6  flex-basis: 250px; /* Starts at 250px */
7  flex-grow: 0;
8  flex-shrink: 0; /* Fixed sidebar */
9}
10
11.main {
12  flex-basis: 0; /* Starts at 0, grows to fill */
13  flex-grow: 1;
14}

Card Grid with Minimum Sizes

CSS

1.card-grid {
2  display: flex;
3  flex-wrap: wrap;
4}
5
6.card {
7  flex-basis: 300px; /* Minimum 300px wide */
8  flex-grow: 1; /* Can grow larger */
9  flex-shrink: 0; /* But won't shrink smaller */
10}

Advanced Flex-Basis Patterns:

Progressive Disclosure Layout

CSS

1.accordion {
2  display: flex;
3  flex-direction: column;
4}
5
6.panel {
7  flex-basis: 60px; /* Collapsed height */
8  transition: flex-basis 0.3s ease;
9}
10
11.panel.expanded {
12  flex-basis: auto; /* Expands to content height */
13}

Responsive Column System

CSS

1.responsive-grid {
2  display: flex;
3  flex-wrap: wrap;
4}
5
6.grid-item {
7  flex-basis: 100%; /* Mobile: full width */
8}
9
10@media (min-width: 576px) {
11  .grid-item {
12    flex-basis: 50%; /* Tablet: half width */
13  }
14}
15
16@media (min-width: 992px) {
17  .grid-item {
18    flex-basis: 33.333%; /* Desktop: third width */
19  }
20}

Content-Aware Sizing

CSS

1.dynamic-item {
2  flex-basis: max-content; /* Size based on content */
3  max-width: 400px; /* But not too large */
4  flex-shrink: 1; /* Can shrink if needed */
5}

Performance Optimized Layout

CSS

1.performance-item {
2  flex-basis: 0; /* Start small */
3  flex-grow: 1; /* Grow to share space */
4  min-width: 200px; /* Minimum usable size */
5}

The Flex Shorthand:

CSS

1/* flex: grow shrink basis */
2.item {
3  flex: 1 1 200px; /* grow: 1, shrink: 1, basis: 200px */
4  flex: 0 0 auto; /* Fixed size item */
5  flex: 1; /* Same as: 1 1 0% */
6}

Common Flex-Basis Use Cases:

Setting minimum column widths in responsive grids
Creating flexible but controlled sidebar layouts
Building card systems with consistent base sizes
Implementing progressive disclosure interfaces
Managing content-based vs fixed-size components

Best Practices:

Use percentages for proportional layouts
Use pixels/rems for specific size requirements
Combine with min/max-width for robust responsive behavior
Consider content size when setting basis values
Test with varying content lengths and screen sizes
Use flex: 1 shorthand for equal-sharing items

Align-Self: Individual Item Alignment

The align-self property allows you to override the container's align-items setting for individual flex items, giving you precise control over cross-axis alignment on a per-item basis.

All Align-Self Values:

Auto (Default)

CSS

1.item {
2  align-self: auto; /* Inherits from align-items */
3}

Cross-Axis Alignment Options

CSS

1.item-start {
2  align-self: flex-start; /* Align to cross-axis start */
3}
4
5.item-end {
6  align-self: flex-end; /* Align to cross-axis end */
7}
8
9.item-center {
10  align-self: center; /* Center on cross-axis */
11}
12
13.item-stretch {
14  align-self: stretch; /* Stretch to fill cross-axis */
15}
16
17.item-baseline {
18  align-self: baseline; /* Align to text baseline */
19}

Overriding Container Alignment:

Container Sets Default, Items Override

CSS

1.container {
2  display: flex;
3  align-items: center; /* Default center alignment */
4}
5
6.special-item {
7  align-self: flex-start; /* This item aligns to start */
8}
9
10.stretched-item {
11  align-self: stretch; /* This item stretches */
12}

Practical Applications:

Mixed Content Heights

CSS

1.card-container {
2  display: flex;
3  align-items: flex-start; /* Cards align to top */
4}
5
6.featured-card {
7  align-self: stretch; /* Featured card fills full height */
8}
9
10.call-to-action {
11  align-self: center; /* CTA card centers vertically */
12}

Navigation with Logo and Search

CSS

1.navbar {
2  display: flex;
3  align-items: center; /* Most items center */
4  height: 80px;
5}
6
7.logo {
8  align-self: flex-start; /* Logo aligns to top */
9  margin-top: 10px;
10}
11
12.search-bar {
13  align-self: stretch; /* Search bar fills height */
14}

Form Layout Optimization

CSS

1.form-row {
2  display: flex;
3  align-items: center; /* Default center alignment */
4}
5
6.form-label {
7  align-self: flex-start; /* Labels align to top */
8}
9
10.form-input {
11  align-self: stretch; /* Inputs fill available height */
12}
13
14.form-help {
15  align-self: baseline; /* Help text aligns to baseline */
16}

Advanced Alignment Patterns:

Dashboard Widget Layout

CSS

1.dashboard-row {
2  display: flex;
3  align-items: flex-start; /* Widgets align to top */
4  gap: 1rem;
5}
6
7.widget-chart {
8  align-self: stretch; /* Chart fills full height */
9}
10
11.widget-stats {
12  align-self: center; /* Stats center vertically */
13}
14
15.widget-controls {
16  align-self: flex-end; /* Controls align to bottom */
17}

Media Object Pattern

CSS

1.media-object {
2  display: flex;
3  align-items: flex-start; /* Default top alignment */
4}
5
6.media-image {
7  align-self: flex-start; /* Image stays at top */
8  flex-shrink: 0;
9}
10
11.media-content {
12  align-self: stretch; /* Content can fill height */
13  flex-grow: 1;
14}
15
16.media-actions {
17  align-self: center; /* Actions center with content */
18}

Responsive Alignment Changes

CSS

1.responsive-item {
2  align-self: flex-start; /* Top alignment on mobile */
3}
4
5@media (min-width: 768px) {
6  .responsive-item {
7    align-self: center; /* Center alignment on desktop */
8  }
9}

Typography and Baseline Alignment

CSS

1.text-row {
2  display: flex;
3  align-items: baseline; /* Baseline alignment for most */
4}
5
6.large-text {
7  font-size: 2rem;
8  align-self: baseline; /* Aligns to baseline */
9}
10
11.small-text {
12  font-size: 0.875rem;
13  align-self: baseline; /* Also baseline aligned */
14}
15
16.icon {
17  align-self: center; /* Icon centers with text */
18}

Card with Flexible Sections

CSS

1.flexible-card {
2  display: flex;
3  flex-direction: column;
4  align-items: stretch; /* Default stretch */
5  height: 300px;
6}
7
8.card-header {
9  align-self: stretch; /* Header fills width */
10}
11
12.card-image {
13  align-self: center; /* Image centers */
14  max-width: 80%;
15}
16
17.card-content {
18  align-self: stretch; /* Content fills width */
19  flex-grow: 1;
20}
21
22.card-footer {
23  align-self: flex-end; /* Footer aligns to bottom */
24}

Interactive State Changes

CSS

1.interactive-item {
2  align-self: flex-start;
3  transition: align-self 0.3s ease;
4}
5
6.interactive-item:hover {
7  align-self: center; /* Centers on hover */
8}
9
10.interactive-item:focus {
11  align-self: stretch; /* Stretches when focused */
12}

Cross-Axis Direction Considerations:

In flex-direction: row → align-self controls vertical alignment
In flex-direction: column → align-self controls horizontal alignment
Always consider the cross-axis when applying align-self
Baseline alignment only works well with text content
Stretch only works when item doesn't have fixed cross-axis size

Best Practices:

Use align-self to create visual hierarchy
Override container alignment for special items
Combine with flex-grow/shrink for complex layouts
Consider responsive alignment changes
Test with different content heights
Use baseline for text alignment, center for icons
Apply stretch judiciously to avoid awkward proportions

Order Property: Visual Reordering

The order property allows you to change the visual order of flex items without changing the HTML structure, providing powerful layout flexibility for responsive design and accessibility.

Understanding Order Values:

Default Order: 0

CSS

1.item {
2  order: 0; /* Default order value */
3}

Positive and Negative Orders

CSS

1.item-first {
2  order: -1; /* Appears before order: 0 items */
3}
4
5.item-default {
6  order: 0; /* Default position */
7}
8
9.item-last {
10  order: 1; /* Appears after order: 0 items */
11}

Order Sorting Rules:

Items are sorted by order value (lowest to highest)
Items with same order value maintain their source order
Negative values come before positive values
Order only affects visual arrangement, not DOM structure

Responsive Layout Reordering:

Mobile-First Navigation

CSS

1.navbar {
2  display: flex;
3  flex-direction: column;
4}
5
6.logo { order: 1; }
7.nav-menu { order: 3; }
8.search { order: 2; }
9
10@media (min-width: 768px) {
11  .navbar {
12    flex-direction: row;
13  }
14  .logo { order: 1; }
15  .search { order: 2; }
16  .nav-menu { order: 3; }
17}

Content Priority Changes

CSS

1/* Mobile: Content first, sidebar last */
2.main-content { order: 1; }
3.sidebar { order: 2; }
4
5@media (min-width: 992px) {
6  /* Desktop: Sidebar first, content second */
7  .sidebar { order: 1; }
8  .main-content { order: 2; }
9}

Advanced Ordering Patterns:

Dashboard Widget Priorities

CSS

1.dashboard {
2  display: flex;
3  flex-wrap: wrap;
4}
5
6/* Mobile priorities */
7.critical-widget { order: 1; }
8.important-widget { order: 2; }
9.nice-to-have-widget { order: 3; }
10
11/* Desktop reordering */
12@media (min-width: 1024px) {
13  .critical-widget { order: 2; } /* Center position */
14  .important-widget { order: 1; } /* Left side */
15  .nice-to-have-widget { order: 3; } /* Right side */
16}

E-commerce Product Layout

CSS

1.product-page {
2  display: flex;
3  flex-direction: column;
4}
5
6/* Mobile order: Image, title, price, description, buttons */
7.product-image { order: 1; }
8.product-title { order: 2; }
9.product-price { order: 3; }
10.product-description { order: 4; }
11.product-buttons { order: 5; }
12
13@media (min-width: 768px) {
14  .product-page {
15    flex-direction: row;
16    flex-wrap: wrap;
17  }
18  
19  /* Desktop order: Image left, title/price/buttons right, description bottom */
20  .product-image { order: 1; flex-basis: 50%; }
21  .product-title { order: 2; flex-basis: 50%; }
22  .product-price { order: 3; flex-basis: 25%; }
23  .product-buttons { order: 4; flex-basis: 25%; }
24  .product-description { order: 5; flex-basis: 100%; }
25}

Dynamic Order Changes with JavaScript:

Priority System

CSS

1.priority-high { order: -10; }
2.priority-medium { order: 0; }
3.priority-low { order: 10; }

JavaScript

1// Dynamic priority changes
2function setPriority(element, priority) {
3  element.classList.remove('priority-high', 'priority-medium', 'priority-low');
4  element.classList.add(`priority-${priority}`);
5}

Interactive Reordering

CSS

1.sortable-item {
2  order: 0;
3  transition: all 0.3s ease;
4}
5
6.sortable-item.first { order: -2; }
7.sortable-item.featured { order: -1; }
8.sortable-item.last { order: 1; }

Accessibility Considerations:

Maintaining Logical Order

HTML

1<!-- HTML maintains logical tab order -->
2<div class="form-container">
3  <div class="form-field" data-visual-order="1">
4    <input type="text" name="firstName">
5  </div>
6  <div class="form-field" data-visual-order="3">
7    <input type="email" name="email">
8  </div>
9  <div class="form-field" data-visual-order="2">
10    <input type="text" name="lastName">
11  </div>
12</div>

CSS

1.form-field[data-visual-order="1"] { order: 1; }
2.form-field[data-visual-order="2"] { order: 2; }
3.form-field[data-visual-order="3"] { order: 3; }

Screen Reader Friendly Ordering

CSS

1/* Visual reordering that doesn't break screen readers */
2.content-wrapper {
3  display: flex;
4  flex-direction: column;
5}
6
7.main-content {
8  order: 2; /* Visually second */
9}
10
11.sidebar {
12  order: 1; /* Visually first */
13}
14
15/* Ensure logical reading order in HTML source */

Advanced Order Techniques:

Masonry-Style Layout

CSS

1.masonry-container {
2  display: flex;
3  flex-wrap: wrap;
4  align-content: flex-start;
5}
6
7.masonry-item {
8  flex-basis: calc(33.333% - 1rem);
9}
10
11.masonry-item.tall { order: -1; } /* Tall items first */
12.masonry-item.featured { order: -2; } /* Featured items even earlier */

Timeline Reordering

CSS

1.timeline {
2  display: flex;
3  flex-direction: column;
4}
5
6/* Default chronological order */
7.timeline-item { order: 0; }
8
9/* Sort by importance */
10.timeline.sort-by-importance .high-importance { order: -1; }
11.timeline.sort-by-importance .medium-importance { order: 0; }
12.timeline.sort-by-importance .low-importance { order: 1; }

Common Use Cases:

Responsive layout reordering without JavaScript
Priority-based content organization
Mobile-first design with desktop reordering
Dashboard widget arrangement
Form field visual optimization
E-commerce product information hierarchy

Best Practices:

Keep HTML source order logical for accessibility
Use semantic order values (like -10, 0, 10) for easier maintenance
Test with screen readers when reordering content
Document order changes for team understanding
Consider keyboard navigation when reordering interactive elements
Use order sparingly - HTML structure changes are often better
Always maintain meaningful tab order for keyboard users

Performance Notes:

Order changes don't trigger layout recalculation in modern browsers
Visual reordering is more performant than DOM manipulation
Combine with transforms for smooth animated reordering
Consider using CSS Grid for complex 2D reordering needs

Flex Items & Advanced Flexbox - Complete Control System

A comprehensive demonstration of all flex item properties working together to create sophisticated, adaptive layouts with individual item control.

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>Flex Items & Advanced Flexbox - Complete Control</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        .demo-card h4 {
59            color: #374151;
60            margin: 1rem 0 0.5rem 0;
61            font-size: 1rem;
62        }
63
64        code {
65            background: rgba(59, 130, 246, 0.1);
66            padding: 2px 6px;
67            border-radius: 4px;
68            font-family: 'Courier New', monospace;
69            color: #1e40af;
70            font-size: 0.9rem;
71        }
72
73        /* =================
74           FLEX CONTAINER BASE
75           ================= */
76        .flex-demo {
77            display: flex;
78            border: 2px dashed #9ca3af;
79            padding: 1rem;
80            margin: 1rem 0;
81            border-radius: 8px;
82            background: rgba(249, 250, 251, 0.8);
83            gap: 0.5rem;
84        }
85
86        .flex-demo.column {
87            flex-direction: column;
88            max-width: 300px;
89        }
90
91        /* =================
92           FLEX ITEMS BASE STYLING
93           ================= */
94        .flex-item {
95            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
96            color: white;
97            padding: 1rem;
98            border-radius: 8px;
99            text-align: center;
100            font-weight: 600;
101            box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
102            transition: all 0.3s ease;
103            border: 2px solid transparent;
104        }
105
106        .flex-item:hover {
107            transform: translateY(-2px);
108            box-shadow: 0 8px 15px rgba(59, 130, 246, 0.4);
109            border-color: rgba(255, 255, 255, 0.3);
110        }
111
112        /* Item Variants */
113        .flex-item.green {
114            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
115            box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
116        }
117
118        .flex-item.orange {
119            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
120            box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
121        }
122
123        .flex-item.red {
124            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
125            box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3);
126        }
127
128        .flex-item.purple {
129            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
130            box-shadow: 0 4px 6px rgba(139, 92, 246, 0.3);
131        }
132
133        /* =================
134           FLEX-GROW DEMOS
135           ================= */
136        .grow-0 { flex-grow: 0; min-width: 100px; }
137        .grow-1 { flex-grow: 1; }
138        .grow-2 { flex-grow: 2; }
139        .grow-3 { flex-grow: 3; }
140
141        .grow-demo {
142            background: rgba(59, 130, 246, 0.05);
143            border-color: #3b82f6;
144        }
145
146        /* =================
147           FLEX-SHRINK DEMOS
148           ================= */
149        .shrink-0 { flex-shrink: 0; width: 200px; }
150        .shrink-1 { flex-shrink: 1; width: 200px; }
151        .shrink-2 { flex-shrink: 2; width: 200px; }
152        .shrink-3 { flex-shrink: 3; width: 200px; }
153
154        .shrink-demo {
155            background: rgba(239, 68, 68, 0.05);
156            border-color: #ef4444;
157            width: 500px; /* Constrained width to force shrinking */
158        }
159
160        /* =================
161           FLEX-BASIS DEMOS
162           ================= */
163        .basis-auto { flex-basis: auto; }
164        .basis-0 { flex-basis: 0; flex-grow: 1; }
165        .basis-100 { flex-basis: 100px; }
166        .basis-200 { flex-basis: 200px; }
167        .basis-percent { flex-basis: 25%; }
168
169        .basis-demo {
170            background: rgba(16, 185, 129, 0.05);
171            border-color: #10b981;
172        }
173
174        /* =================
175           ALIGN-SELF DEMOS
176           ================= */
177        .align-demo {
178            height: 120px;
179            align-items: center;
180            background: rgba(245, 158, 11, 0.05);
181            border-color: #f59e0b;
182        }
183
184        .align-self-start { align-self: flex-start; }
185        .align-self-center { align-self: center; }
186        .align-self-end { align-self: flex-end; }
187        .align-self-stretch { align-self: stretch; }
188        .align-self-baseline { align-self: baseline; }
189
190        /* =================
191           ORDER DEMOS
192           ================= */
193        .order-demo {
194            background: rgba(139, 92, 246, 0.05);
195            border-color: #8b5cf6;
196        }
197
198        .order-neg2 { order: -2; }
199        .order-neg1 { order: -1; }
200        .order-0 { order: 0; }
201        .order-1 { order: 1; }
202        .order-2 { order: 2; }
203
204        /* =================
205           REAL-WORLD EXAMPLES
206           ================= */
207        .dashboard {
208            display: flex;
209            gap: 1rem;
210            margin: 1rem 0;
211        }
212
213        .sidebar {
214            flex-basis: 250px;
215            flex-grow: 0;
216            flex-shrink: 0;
217            background: rgba(31, 41, 55, 0.9);
218            color: white;
219            padding: 1.5rem;
220            border-radius: 8px;
221            backdrop-filter: blur(10px);
222        }
223
224        .main-content {
225            flex-grow: 1;
226            flex-shrink: 1;
227            background: rgba(255, 255, 255, 0.9);
228            padding: 1.5rem;
229            border-radius: 8px;
230            backdrop-filter: blur(5px);
231        }
232
233        .widgets {
234            display: flex;
235            gap: 1rem;
236            margin-top: 1rem;
237        }
238
239        .widget {
240            flex: 1;
241            background: rgba(99, 102, 241, 0.1);
242            padding: 1rem;
243            border-radius: 8px;
244            border: 1px solid rgba(99, 102, 241, 0.2);
245        }
246
247        .widget.featured {
248            flex-grow: 2; /* Takes twice the space */
249            background: rgba(16, 185, 129, 0.1);
250            border-color: rgba(16, 185, 129, 0.2);
251        }
252
253        /* Navigation with flexible search */
254        .smart-nav {
255            display: flex;
256            align-items: center;
257            gap: 1rem;
258            background: rgba(31, 41, 55, 0.9);
259            padding: 1rem 1.5rem;
260            border-radius: 8px;
261            backdrop-filter: blur(10px);
262            margin-bottom: 2rem;
263        }
264
265        .nav-logo {
266            flex-shrink: 0;
267            color: white;
268            font-weight: bold;
269            font-size: 1.2rem;
270        }
271
272        .nav-links {
273            flex-shrink: 0;
274            display: flex;
275            gap: 1rem;
276        }
277
278        .nav-links a {
279            color: rgba(255, 255, 255, 0.8);
280            text-decoration: none;
281            transition: color 0.3s ease;
282        }
283
284        .nav-links a:hover {
285            color: white;
286        }
287
288        .nav-search {
289            flex-grow: 1;
290            max-width: 400px;
291            margin: 0 1rem;
292        }
293
294        .nav-search input {
295            width: 100%;
296            padding: 0.5rem 1rem;
297            border: 1px solid rgba(255, 255, 255, 0.2);
298            border-radius: 6px;
299            background: rgba(255, 255, 255, 0.1);
300            color: white;
301        }
302
303        .nav-search input::placeholder {
304            color: rgba(255, 255, 255, 0.6);
305        }
306
307        .nav-user {
308            flex-shrink: 0;
309            color: white;
310        }
311
312        /* Card layout with mixed controls */
313        .card-layout {
314            display: flex;
315            gap: 1rem;
316            flex-wrap: wrap;
317        }
318
319        .card {
320            flex: 1 1 300px; /* grow: 1, shrink: 1, basis: 300px */
321            background: rgba(255, 255, 255, 0.9);
322            border-radius: 8px;
323            overflow: hidden;
324            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
325            display: flex;
326            flex-direction: column;
327        }
328
329        .card-image {
330            flex-shrink: 0;
331            height: 150px;
332            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
333            display: flex;
334            align-items: center;
335            justify-content: center;
336            color: white;
337            font-weight: bold;
338        }
339
340        .card-content {
341            flex-grow: 1;
342            padding: 1rem;
343        }
344
345        .card-actions {
346            flex-shrink: 0;
347            padding: 1rem;
348            border-top: 1px solid rgba(0, 0, 0, 0.1);
349            display: flex;
350            gap: 0.5rem;
351        }
352
353        .card-actions button {
354            flex: 1;
355            padding: 0.5rem 1rem;
356            border: 1px solid #3b82f6;
357            background: transparent;
358            color: #3b82f6;
359            border-radius: 4px;
360            cursor: pointer;
361            transition: all 0.3s ease;
362        }
363
364        .card-actions button:hover {
365            background: #3b82f6;
366            color: white;
367        }
368
369        .card.featured {
370            flex-basis: 100%; /* Featured card takes full width */
371            background: rgba(16, 185, 129, 0.1);
372        }
373
374        /* =================
375           INTERACTIVE CONTROLS
376           ================= */
377        .control-panel {
378            background: rgba(15, 23, 42, 0.9);
379            color: white;
380            padding: 1.5rem;
381            border-radius: 8px;
382            margin: 1rem 0;
383            backdrop-filter: blur(10px);
384        }
385
386        .controls-grid {
387            display: grid;
388            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
389            gap: 1rem;
390            margin-bottom: 1rem;
391        }
392
393        .control-group {
394            display: flex;
395            flex-direction: column;
396            gap: 0.5rem;
397        }
398
399        .control-group label {
400            font-weight: 600;
401            font-size: 0.9rem;
402        }
403
404        .control-group input[type="range"] {
405            width: 100%;
406        }
407
408        .control-group select,
409        .control-group input {
410            padding: 0.5rem;
411            border: 1px solid #374151;
412            border-radius: 4px;
413            background: #1f2937;
414            color: white;
415        }
416
417        .playground {
418            border: 2px dashed #6366f1;
419            padding: 1rem;
420            border-radius: 8px;
421            background: rgba(255, 255, 255, 0.9);
422            min-height: 150px;
423            display: flex;
424            transition: all 0.3s ease;
425        }
426
427        .playground-item {
428            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
429            color: white;
430            padding: 1rem;
431            border-radius: 8px;
432            text-align: center;
433            font-weight: 600;
434            margin: 2px;
435            transition: all 0.3s ease;
436            display: flex;
437            align-items: center;
438            justify-content: center;
439            min-width: 80px;
440        }
441
442        .playground-item.item-1 { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
443        .playground-item.item-2 { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
444        .playground-item.item-3 { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
445
446        .css-output {
447            background: rgba(15, 23, 42, 0.05);
448            border-radius: 8px;
449            padding: 1rem;
450            margin-top: 1rem;
451        }
452
453        .css-output pre {
454            font-family: 'Courier New', monospace;
455            font-size: 0.85rem;
456            color: #1e293b;
457            overflow-x: auto;
458        }
459
460        /* =================
461           RESPONSIVE DESIGN
462           ================= */
463        @media (max-width: 768px) {
464            .container {
465                padding: 10px;
466            }
467
468            .demo-card {
469                padding: 1rem;
470            }
471
472            .dashboard {
473                flex-direction: column;
474            }
475
476            .sidebar {
477                flex-basis: auto;
478                order: 2; /* Moves sidebar after content on mobile */
479            }
480
481            .main-content {
482                order: 1; /* Content comes first on mobile */
483            }
484
485            .smart-nav {
486                flex-wrap: wrap;
487            }
488
489            .nav-search {
490                order: 3;
491                flex-basis: 100%;
492                margin: 1rem 0 0 0;
493                max-width: none;
494            }
495
496            .card-layout {
497                flex-direction: column;
498            }
499
500            .card {
501                flex-basis: auto;
502            }
503
504            .controls-grid {
505                grid-template-columns: 1fr;
506            }
507        }
508
509        /* =================
510           UTILITY CLASSES
511           ================= */
512        .text-center { text-align: center; }
513        .mb-2 { margin-bottom: 1rem; }
514        .mt-2 { margin-top: 1rem; }
515        .font-bold { font-weight: bold; }
516    </style>
517</head>
518<body>
519    <div class="container">
520        <!-- Smart Navigation with Flex Items -->
521        <nav class="smart-nav">
522            <div class="nav-logo">FlexMaster</div>
523            <div class="nav-links">
524                <a href="#">Home</a>
525                <a href="#">About</a>
526                <a href="#">Contact</a>
527            </div>
528            <div class="nav-search">
529                <input type="search" placeholder="Search...">
530            </div>
531            <div class="nav-user">Profile</div>
532        </nav>
533
534        <!-- Hero Section -->
535        <div class="demo-card text-center">
536            <h1 style="color: #1e40af; margin-bottom: 1rem;">🚀 Flex Items & Advanced Flexbox</h1>
537            <p style="font-size: 1.1rem; color: #4b5563;">Master individual flex item control for sophisticated layouts</p>
538        </div>
539
540        <!-- Flex-Grow Demo -->
541        <div class="demo-card">
542            <h2>1. Flex-Grow - Controlling Item Expansion</h2>
543            <p>The <code>flex-grow</code> property determines how much a flex item should grow relative to other items.</p>
544            
545            <h4>Equal Growth (flex-grow: 1):</h4>
546            <div class="flex-demo grow-demo">
547                <div class="flex-item grow-1">Grow 1</div>
548                <div class="flex-item grow-1 green">Grow 1</div>
549                <div class="flex-item grow-1 orange">Grow 1</div>
550            </div>
551
552            <h4>Proportional Growth (1:2:3):</h4>
553            <div class="flex-demo grow-demo">
554                <div class="flex-item grow-1">Grow 1</div>
555                <div class="flex-item grow-2 green">Grow 2</div>
556                <div class="flex-item grow-3 orange">Grow 3</div>
557            </div>
558
559            <h4>Mixed with No-Grow:</h4>
560            <div class="flex-demo grow-demo">
561                <div class="flex-item grow-0">Fixed</div>
562                <div class="flex-item grow-1 green">Flexible</div>
563                <div class="flex-item grow-0 orange">Fixed</div>
564            </div>
565        </div>
566
567        <!-- Flex-Shrink Demo -->
568        <div class="demo-card">
569            <h2>2. Flex-Shrink - Controlling Item Compression</h2>
570            <p>The <code>flex-shrink</code> property determines how much a flex item should shrink when space is limited.</p>
571            
572            <h4>Container too small for all items (shrinking behavior):</h4>
573            <div class="flex-demo shrink-demo">
574                <div class="flex-item shrink-0">No Shrink</div>
575                <div class="flex-item shrink-1 green">Shrink 1</div>
576                <div class="flex-item shrink-2 orange">Shrink 2</div>
577                <div class="flex-item shrink-3 red">Shrink 3</div>
578            </div>
579        </div>
580
581        <!-- Flex-Basis Demo -->
582        <div class="demo-card">
583            <h2>3. Flex-Basis - Setting Initial Item Size</h2>
584            <p>The <code>flex-basis</code> property defines the initial size before free space is distributed.</p>
585            
586            <h4>Different Basis Values:</h4>
587            <div class="flex-demo basis-demo">
588                <div class="flex-item basis-auto">auto</div>
589                <div class="flex-item basis-100 green">100px</div>
590                <div class="flex-item basis-200 orange">200px</div>
591                <div class="flex-item basis-percent red">25%</div>
592            </div>
593
594            <h4>Basis with Growth:</h4>
595            <div class="flex-demo basis-demo">
596                <div class="flex-item basis-0">basis: 0, grow: 1</div>
597                <div class="flex-item basis-100 green" style="flex-grow: 1;">basis: 100px, grow: 1</div>
598                <div class="flex-item basis-200 orange" style="flex-grow: 1;">basis: 200px, grow: 1</div>
599            </div>
600        </div>
601
602        <!-- Align-Self Demo -->
603        <div class="demo-card">
604            <h2>4. Align-Self - Individual Item Alignment</h2>
605            <p>The <code>align-self</code> property overrides the container's align-items for individual items.</p>
606            
607            <div class="flex-demo align-demo">
608                <div class="flex-item align-self-start">flex-start</div>
609                <div class="flex-item align-self-center green">center</div>
610                <div class="flex-item align-self-end orange">flex-end</div>
611                <div class="flex-item align-self-stretch red">stretch</div>
612                <div class="flex-item align-self-baseline purple" style="font-size: 1.5rem;">baseline</div>
613            </div>
614        </div>
615
616        <!-- Order Demo -->
617        <div class="demo-card">
618            <h2>5. Order - Visual Reordering</h2>
619            <p>The <code>order</code> property changes the visual order without affecting HTML structure.</p>
620            
621            <h4>Source Order: A, B, C, D, E</h4>
622            <h4>Visual Order: D, E, A, B, C</h4>
623            <div class="flex-demo order-demo">
624                <div class="flex-item order-0">A (order: 0)</div>
625                <div class="flex-item order-0 green">B (order: 0)</div>
626                <div class="flex-item order-1 orange">C (order: 1)</div>
627                <div class="flex-item order-neg2 red">D (order: -2)</div>
628                <div class="flex-item order-neg1 purple">E (order: -1)</div>
629            </div>
630        </div>
631
632        <!-- Real-World Dashboard Example -->
633        <div class="demo-card">
634            <h2>6. Real-World Example - Adaptive Dashboard</h2>
635            <p>Combining all flex item properties for a responsive dashboard layout:</p>
636            
637            <div class="dashboard">
638                <div class="sidebar">
639                    <h3 style="margin-bottom: 1rem;">Sidebar</h3>
640                    <p style="font-size: 0.9rem; opacity: 0.8;">Fixed width sidebar with flex-shrink: 0</p>
641                    <ul style="margin-top: 1rem; list-style: none;">
642                        <li style="padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1);">Dashboard</li>
643                        <li style="padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1);">Analytics</li>
644                        <li style="padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1);">Settings</li>
645                    </ul>
646                </div>
647                <div class="main-content">
648                    <h3 style="margin-bottom: 1rem; color: #1e40af;">Main Content Area</h3>
649                    <p>This area uses flex-grow: 1 to take all remaining space.</p>
650                    
651                    <div class="widgets">
652                        <div class="widget">
653                            <h4 style="color: #6366f1; margin-bottom: 0.5rem;">Widget 1</h4>
654                            <p style="font-size: 0.9rem; color: #6b7280;">Normal flex: 1</p>
655                        </div>
656                        <div class="widget featured">
657                            <h4 style="color: #059669; margin-bottom: 0.5rem;">Featured Widget</h4>
658                            <p style="font-size: 0.9rem; color: #6b7280;">flex-grow: 2 (twice the space)</p>
659                        </div>
660                        <div class="widget">
661                            <h4 style="color: #6366f1; margin-bottom: 0.5rem;">Widget 3</h4>
662                            <p style="font-size: 0.9rem; color: #6b7280;">Normal flex: 1</p>
663                        </div>
664                    </div>
665                </div>
666            </div>
667        </div>
668
669        <!-- Card Layout Example -->
670        <div class="demo-card">
671            <h2>7. Flexible Card Layout</h2>
672            <p>Cards with different flex behaviors and responsive breakpoints:</p>
673            
674            <div class="card-layout">
675                <div class="card">
676                    <div class="card-image">Regular Card</div>
677                    <div class="card-content">
678                        <h4 style="color: #1e40af; margin-bottom: 0.5rem;">Standard Card</h4>
679                        <p style="font-size: 0.9rem; color: #6b7280;">flex: 1 1 300px - grows, shrinks, 300px basis</p>
680                    </div>
681                    <div class="card-actions">
682                        <button>Action</button>
683                        <button>More</button>
684                    </div>
685                </div>
686                
687                <div class="card">
688                    <div class="card-image" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">Adaptive Card</div>
689                    <div class="card-content">
690                        <h4 style="color: #059669; margin-bottom: 0.5rem;">Adaptive Card</h4>
691                        <p style="font-size: 0.9rem; color: #6b7280;">Same flex properties, different content length adaptation</p>
692                    </div>
693                    <div class="card-actions">
694                        <button>Primary</button>
695                        <button>Secondary</button>
696                    </div>
697                </div>
698                
699                <div class="card featured">
700                    <div class="card-image" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">Featured Card</div>
701                    <div class="card-content">
702                        <h4 style="color: #d97706; margin-bottom: 0.5rem;">Featured Content</h4>
703                        <p style="font-size: 0.9rem; color: #6b7280;">flex-basis: 100% makes this card take full width on larger screens</p>
704                    </div>
705                    <div class="card-actions">
706                        <button>Learn More</button>
707                        <button>Get Started</button>
708                    </div>
709                </div>
710            </div>
711        </div>
712
713        <!-- Interactive Playground -->
714        <div class="demo-card">
715            <h2>8. 🎮 Advanced Flex Items Playground</h2>
716            <p>Experiment with individual flex item properties:</p>
717            
718            <div class="control-panel">
719                <div class="controls-grid">
720                    <div class="control-group">
721                        <label>Item 1 - Flex Grow:</label>
722                        <input type="range" id="grow1" min="0" max="5" value="1" oninput="updatePlayground()">
723                        <span id="grow1-value">1</span>
724                    </div>
725                    <div class="control-group">
726                        <label>Item 1 - Flex Shrink:</label>
727                        <input type="range" id="shrink1" min="0" max="5" value="1" oninput="updatePlayground()">
728                        <span id="shrink1-value">1</span>
729                    </div>
730                    <div class="control-group">
731                        <label>Item 1 - Flex Basis:</label>
732                        <select id="basis1" onchange="updatePlayground()">
733                            <option value="auto">auto</option>
734                            <option value="0">0</option>
735                            <option value="100px">100px</option>
736                            <option value="200px">200px</option>
737                            <option value="25%">25%</option>
738                        </select>
739                    </div>
740                    <div class="control-group">
741                        <label>Item 1 - Align Self:</label>
742                        <select id="align1" onchange="updatePlayground()">
743                            <option value="auto">auto</option>
744                            <option value="flex-start">flex-start</option>
745                            <option value="center">center</option>
746                            <option value="flex-end">flex-end</option>
747                            <option value="stretch">stretch</option>
748                        </select>
749                    </div>
750                    <div class="control-group">
751                        <label>Item 2 - Order:</label>
752                        <input type="range" id="order2" min="-2" max="2" value="0" oninput="updatePlayground()">
753                        <span id="order2-value">0</span>
754                    </div>
755                    <div class="control-group">
756                        <label>Playground Height:</label>
757                        <input type="range" id="height" min="100" max="300" value="150" oninput="updatePlayground()">
758                        <span id="height-value">150px</span>
759                    </div>
760                </div>
761            </div>
762            
763            <div id="playground" class="playground">
764                <div id="playground-item-1" class="playground-item item-1">Item 1</div>
765                <div id="playground-item-2" class="playground-item item-2">Item 2</div>
766                <div id="playground-item-3" class="playground-item item-3">Item 3</div>
767            </div>
768            
769            <div class="css-output">
770                <strong>Current CSS for Item 1:</strong>
771                <pre id="cssOutput">flex-grow: 1;
772flex-shrink: 1;
773flex-basis: auto;
774align-self: auto;</pre>
775            </div>
776        </div>
777
778        <!-- Summary -->
779        <div class="demo-card text-center">
780            <h2>🎉 Advanced Flexbox Mastery Achieved!</h2>
781            <p class="mb-2">You've mastered all individual flex item properties for complete layout control:</p>
782            <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1rem; margin-top: 2rem;">
783                <div class="flex-item" style="flex: 1; min-width: 150px;">
784                    <strong>flex-grow</strong><br>
785                    Controls expansion
786                </div>
787                <div class="flex-item green" style="flex: 1; min-width: 150px;">
788                    <strong>flex-shrink</strong><br>
789                    Controls compression
790                </div>
791                <div class="flex-item orange" style="flex: 1; min-width: 150px;">
792                    <strong>flex-basis</strong><br>
793                    Sets initial size
794                </div>
795                <div class="flex-item red" style="flex: 1; min-width: 150px;">
796                    <strong>align-self</strong><br>
797                    Individual alignment
798                </div>
799                <div class="flex-item purple" style="flex: 1; min-width: 150px;">
800                    <strong>order</strong><br>
801                    Visual reordering
802                </div>
803            </div>
804        </div>
805    </div>
806
807    <script>
808        // Advanced Flex Items Playground functionality
809        function updatePlayground() {
810            const item1 = document.getElementById('playground-item-1');
811            const item2 = document.getElementById('playground-item-2');
812            const playground = document.getElementById('playground');
813            
814            // Get control values
815            const grow1 = document.getElementById('grow1').value;
816            const shrink1 = document.getElementById('shrink1').value;
817            const basis1 = document.getElementById('basis1').value;
818            const align1 = document.getElementById('align1').value;
819            const order2 = document.getElementById('order2').value;
820            const height = document.getElementById('height').value;
821            
822            // Update value displays
823            document.getElementById('grow1-value').textContent = grow1;
824            document.getElementById('shrink1-value').textContent = shrink1;
825            document.getElementById('order2-value').textContent = order2;
826            document.getElementById('height-value').textContent = height + 'px';
827            
828            // Apply styles to item 1
829            item1.style.flexGrow = grow1;
830            item1.style.flexShrink = shrink1;
831            item1.style.flexBasis = basis1;
832            item1.style.alignSelf = align1;
833            
834            // Apply order to item 2
835            item2.style.order = order2;
836            
837            // Update playground height
838            playground.style.height = height + 'px';
839            
840            // Update CSS output
841            const cssOutput = document.getElementById('cssOutput');
842            cssOutput.textContent = `flex-grow: ${grow1};
843flex-shrink: ${shrink1};
844flex-basis: ${basis1};
845align-self: ${align1};`;
846            
847            console.log(`Updated playground: grow:${grow1}, shrink:${shrink1}, basis:${basis1}, align:${align1}, order2:${order2}`);
848        }
849        
850        // Initialize playground
851        document.addEventListener('DOMContentLoaded', function() {
852            updatePlayground();
853            
854            // Add interactive feedback to all flex items
855            const flexItems = document.querySelectorAll('.flex-item, .playground-item');
856            flexItems.forEach(item => {
857                item.addEventListener('click', function() {
858                    this.style.transform = 'scale(0.95)';
859                    setTimeout(() => {
860                        this.style.transform = '';
861                    }, 150);
862                });
863                
864                // Show property values on hover
865                item.addEventListener('mouseenter', function() {
866                    const computedStyle = window.getComputedStyle(this);
867                    const grow = computedStyle.flexGrow;
868                    const shrink = computedStyle.flexShrink;
869                    const basis = computedStyle.flexBasis;
870                    
871                    if (grow !== '0' || shrink !== '1' || basis !== 'auto') {
872                        console.log(`Flex properties - grow: ${grow}, shrink: ${shrink}, basis: ${basis}`);
873                    }
874                });
875            });
876            
877            // Responsive behavior demo
878            function handleResize() {
879                const isMobile = window.innerWidth <= 768;
880                const dashboard = document.querySelector('.dashboard');
881                
882                if (isMobile) {
883                    console.log('📱 Mobile view: Dashboard switched to column layout');
884                } else {
885                    console.log('💻 Desktop view: Dashboard using row layout');
886                }
887            }
888            
889            window.addEventListener('resize', handleResize);
890            handleResize();
891            
892            console.log('🚀 Advanced Flexbox lesson loaded! Try the interactive playground!');
893        });
894        
895        // Keyboard shortcuts for playground
896        document.addEventListener('keydown', function(e) {
897            if (e.ctrlKey || e.metaKey) {
898                switch(e.key) {
899                    case '1':
900                        e.preventDefault();
901                        document.getElementById('grow1').value = '1';
902                        updatePlayground();
903                        break;
904                    case '2':
905                        e.preventDefault();
906                        document.getElementById('grow1').value = '2';
907                        updatePlayground();
908                        break;
909                    case '0':
910                        e.preventDefault();
911                        document.getElementById('grow1').value = '0';
912                        updatePlayground();
913                        break;
914                }
915            }
916        });
917    </script>
918</body>
919</html>

How It Works

This comprehensive demonstration showcases every aspect of Flex Items & Advanced Flexbox covered in Lesson 2:

🎯 Complete Flex Item Property Coverage:

1. Flex-Grow Mastery:

Equal growth demonstration with all items set to flex-grow: 1
Proportional growth ratios (1:2:3) showing relative space distribution
Mixed scenarios with fixed and flexible items
Real-world navigation with flexible search bar implementation
Dashboard widgets with featured content taking double space

2. Flex-Shrink Control:

Constrained container demonstrating shrink behavior differences
Items with flex-shrink: 0 maintaining size vs shrinking items
Proportional shrinking with different shrink values (1, 2, 3)
Sidebar layout protecting fixed elements from shrinking
Card layout with content areas that can compress appropriately

3. Flex-Basis Foundation:

Multiple basis value demonstrations: auto, 0, pixels, percentages
Combination with grow/shrink for sophisticated sizing
Content-aware sizing vs fixed sizing comparisons
Responsive grid system using basis for breakpoint behavior
Performance-optimized layouts starting from basis: 0

4. Align-Self Individual Control:

All five alignment values demonstrated with visual height differences
Container default vs individual item overrides
Mixed content types with different alignment needs
Baseline alignment for typography elements
Stretch behavior for adaptive item heights

5. Order Visual Reordering:

Source vs visual order demonstration (A,B,C,D,E → D,E,A,B,C)
Negative and positive order values with sorting behavior
Responsive reordering in dashboard layout (sidebar moves on mobile)
Navigation reordering for mobile-first design
Accessibility-conscious reordering maintaining logical tab order

6. Real-World Integration Examples:

Smart Navigation System:

Logo: flex-shrink: 0 (never shrinks)
Links: flex-shrink: 0 (maintain readability)
Search: flex-grow: 1 (takes remaining space)
User menu: flex-shrink: 0 (always visible)
Responsive reordering on mobile screens

Adaptive Dashboard Layout:

Sidebar: Fixed width with flex-shrink: 0
Main content: flex-grow: 1 takes remaining space
Featured widget: flex-grow: 2 for prominence
Mobile responsiveness with order changes

Flexible Card System:

Cards: flex: 1 1 300px (grow, shrink, 300px basis)
Featured cards: flex-basis: 100% for full width
Content areas: flex-grow: 1 for content expansion
Action areas: flex-shrink: 0 for button protection

7. Interactive Learning Playground:

Live manipulation of all flex item properties
Real-time visual feedback and CSS code generation
Individual control over grow, shrink, basis, align-self, and order
Height adjustment to see cross-axis alignment effects
Keyboard shortcuts for common operations

8. Advanced Techniques Demonstrated:

Combining multiple properties for complex behaviors
Responsive breakpoint adaptations
Performance considerations with basis: 0 vs auto
Content-aware vs fixed sizing strategies
Accessibility maintenance with visual reordering

9. Professional Polish Features:

Glass morphism design with backdrop effects
Smooth transitions and hover feedback
Color coding for different property demonstrations
Responsive behavior that works across all devices
Interactive elements encouraging experimentation

10. Educational Enhancement:

Progressive complexity from basic to advanced concepts
Real-world context for every property demonstration
Visual feedback showing property effects clearly
Code examples accompanying each demonstration
Console logging for development insights

This demonstration serves as both a comprehensive learning tool and practical reference guide, showing how individual flex item properties combine with container properties to create sophisticated, responsive layouts that adapt intelligently to content and screen size changes.

CSS

Flex Items & Advanced Flexbox

Learning Objectives

Introduction

Flex-Grow: Controlling Item Expansion

Flex-Shrink: Controlling Item Compression

Flex-Basis: Setting Initial Item Size

Align-Self: Individual Item Alignment

Order Property: Visual Reordering

Flex Items & Advanced Flexbox - Complete Control System

How It Works

Key Takeaways

What's Next?

Table of Contents