Main Content
This main content area expands to fill available space while the sidebar maintains its fixed width.
🎛️ Interactive Flexbox Playground
Experiment with flexbox properties and see their effects in real-time:
Container Properties:
10px
Selected Item Properties:
0
1
Click on a flex item to select and modify it
Item 1
Item 2
Item 3
Item 4
Item 5
Generated CSS:
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 10px;
}
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 10px;
.selected-item {
flex-grow: 0;
flex-shrink: 1;
align-self: auto;
}
flex-shrink: 1;
align-self: auto;
📐 Common Flexbox Patterns
Learn practical layouts you can create with flexbox:
Perfectly Centered
Both horizontally and vertically!
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Card 1
Flexible card content that adapts to available space.
Card 2
Cards grow and shrink uniformly.
Card 3
Perfect for responsive designs.
.cards-container {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.card {
flex: 1 1 300px;
}
⚖️ Flexbox vs Other Layout Methods
Compare flexbox with traditional layout techniques:
1
2
3
1
2
3
1
2
3
1
2
3
Flexbox Advantages:
- ✅ Easy vertical centering
- ✅ Flexible item sizing
- ✅ Easy reordering
- ✅ Automatic spacing
- ✅ Direction control
- ✅ Modern browser support
💪 Flexbox Layout Challenge
Test your flexbox skills by recreating these layouts:
Target Layout:
Your Layout:
.container {
display: flex;
/* Add your flexbox properties here */
}
.body {
/* Style the middle section */
}
.main {
/* Make main content flexible */
}
Challenge Progress: 0/3
📚 Flexbox Quick Reference
Container Properties
display: flex- Creates flex containerflex-direction- Main axis directionjustify-content- Main axis alignmentalign-items- Cross axis alignmentflex-wrap- Wrapping behaviorgap- Space between items
Item Properties
flex-grow- Growth factorflex-shrink- Shrink factorflex-basis- Initial sizeflex- Shorthand propertyalign-self- Individual alignmentorder- Visual order
Common Values
flex: 1- Equal flexible itemsflex: 0 0 auto- Fixed size itemjustify-content: center- Center itemsalign-items: center- Vertical centerflex-direction: column- Vertical layout
Best Practices
- Use flexbox for 1D layouts
- Perfect for navigation bars
- Great for card layouts
- Excellent browser support
- Combine with CSS Grid when needed