Search pages
Search all CSS Showcase pages by name
Flexbox Patterns
Real-world flexbox patterns you'll use again and again — navigation bars, card layouts, media objects, and more
Common Flexbox Patterns
Real-world flexbox patterns you'll use again and again in your projects.
Card 1
Flexible card that grows to fill space.
Card 2
All cards maintain equal height.
Card 3
Button always at the bottom.
Media Object Pattern
Image on the left, content on the right. A classic pattern made simple with flexbox.
Flexbox Pro Tips
Battle-tested advice to level up your flexbox game.
Use Gap Instead of Margins
The gap property is cleaner and doesn't require nth-child selectors to remove edge margins.
Min-Width: 0 for Truncation
Flex items have min-width: auto by default. Set to 0 to allow text truncation with overflow: hidden.
Flex: 1 1 0 vs Flex: 1
Flex: 1 is shorthand for flex: 1 1 0, which makes items grow equally from a zero basis.
Master Two Dimensions
Flexbox is perfect for one dimension. Ready for the full power of two-dimensional layouts?