Quick Presets
Container Properties
Item Properties
Click on an item in the preview to edit its properties
Live Preview
1
2
3
Click on items to edit their individual properties
CSS
css
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}Tailwind CSS
html
<div class="flex justify-start items-stretch gap-2"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
How to Use Flexbox
Container Properties
- • flex-direction: Direction of main axis
- • justify-content: Alignment along main axis
- • align-items: Alignment along cross axis
- • flex-wrap: Whether items wrap to new lines
- • gap: Space between items
Item Properties
- • flex-grow: How much item grows
- • flex-shrink: How much item shrinks
- • flex-basis: Initial size before growing/shrinking
- • align-self: Override container's align-items
Common Patterns
- • Center content: justify-content: center + align-items: center
- • Space between: justify-content: space-between
- • Sidebar layout: One item with flex-grow: 1
- • Card grid: flex-wrap: wrap + flex-basis
- • Responsive: Combine with media queries
Browser Support
- • All modern browsers support flexbox
- • IE 10+ with vendor prefixes
- • Mobile browsers: Full support
- • Use autoprefixer for legacy support
- • Fallback: float or inline-block