Flexbox Generator

Visual Flexbox Builder with Live Preview and Code Export

An interactive CSS Flexbox generator and learning tool. Visualize how flexbox properties work in real-time. Adjust container and item properties with instant preview. Export ready-to-use CSS using the canonical flex shorthand plus a matching HTML markup block, so you can paste a complete container and items snippet straight into your project.

What is CSS Flexbox?

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. It makes complex layouts simple and responsive.

Key Concepts:

Flex Container:
- Parent element with display: flex
- Controls child item arrangement
- Properties: flex-direction, flex-wrap, justify-content, align-items, gap

Flex Items:
- Direct children of flex container
- Can grow, shrink, and align independently
- Properties: flex-grow, flex-shrink, flex-basis, align-self, order

Advantages:
- Easy vertical centering
- Equal height columns
- Flexible spacing
- Responsive without media queries
- Reorder items visually

How does flex-direction work?

flex-direction defines the main axis and item flow:

Values:
- row (default): Left to right →
- row-reverse: Right to left ←
- column: Top to bottom ↓
- column-reverse: Bottom to top ↑

Main Axis vs Cross Axis:
- row: main axis = horizontal, cross = vertical
- column: main axis = vertical, cross = horizontal

This affects:
- justify-content (main axis alignment)
- align-items (cross axis alignment)
- flex-basis interpretation

Usage Tips:
- Use column for stacking
- Use row for horizontal layouts
- Combine with flex-wrap for responsive grids

What is the difference between justify-content and align-items?

They control alignment on different axes:

justify-content (Main Axis):
- flex-start: Pack items at start
- flex-end: Pack items at end
- center: Center items
- space-between: Even space between items
- space-around: Even space around items
- space-evenly: Equal space everywhere

align-items (Cross Axis):
- stretch: Stretch to fill container
- flex-start: Align to start
- flex-end: Align to end
- center: Center items
- baseline: Align text baselines

Common Patterns:
center + center = Perfect centering
space-between + center = Navigation bar
flex-start + stretch = Sidebar layout

How do flex-grow, flex-shrink, and flex-basis work?

These control how items size themselves:

flex-grow (default: 0):
- How much item grows relative to others
- 0 = don't grow
- 1 = grow equally with other flex-grow: 1 items
- 2 = grow twice as much as flex-grow: 1 items

flex-shrink (default: 1):
- How much item shrinks when space is tight
- 0 = don't shrink
- 1 = shrink equally
- Higher = shrink more

flex-basis (default: auto):
- Initial size before growing/shrinking
- auto = use content/width/height
- 0 = ignore content size
- 200px = start at 200px
- 25% = start at 25% of container

Shorthand:
flex: 1 = flex: 1 1 0 (grow, no shrink, 0 basis)
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto

What are common flexbox layout patterns?

Popular flexbox patterns:

Centering:
justify-content: center;
align-items: center;

Navigation Bar:
justify-content: space-between;
align-items: center;

Equal Width Columns:
.item { flex: 1; }

Sidebar Layout:
.sidebar { flex: 0 0 250px; }
.main { flex: 1; }

Holy Grail (3 columns):
.left { flex: 0 0 200px; }
.center { flex: 1; }
.right { flex: 0 0 200px; }

Card Grid:
flex-wrap: wrap;
gap: 20px;
.card { flex: 0 0 calc(33.33% - 20px); }

Sticky Footer:
.container { min-height: 100vh; flex-direction: column; }
.content { flex: 1; }
.footer { flex-shrink: 0; }

This tool includes these as presets!

What does the flex shorthand (flex: grow shrink basis) mean?

flex is the shorthand for flex-grow, flex-shrink, and flex-basis in that order. Most codebases and linters expect it instead of three separate lines, so this tool emits it by default (toggle it off to see the long-hand).

flex: 1 1 0 → grow to fill, may shrink, ignore content size (equal columns)
flex: 0 0 200px → fixed 200px, never grow or shrink (sidebar)
flex: 1 1 auto → grow but start from content size

Common single-value forms:
flex: 1 = flex: 1 1 0%
flex: auto = flex: 1 1 auto
flex: none = flex: 0 0 auto
flex: initial = flex: 0 1 auto (the default)

Edge cases:
- A unitless single value (flex: 1) sets flex-basis to 0, not auto. This trips people up: flex: 1 collapses to content-zero, while flex-grow: 1 alone keeps flex-basis: auto.
- Always include a unit on the basis (0% or 0px) if you want to be explicit; some older parsers were picky about bare 0.

Flexbox vs CSS Grid: when should I use each?

They solve different problems and often work together.

Use Flexbox for one-dimensional layouts (a single row or column): navigation bars, toolbars, button groups, centering one element, distributing items along an axis with gap and justify-content. Flexbox is content-first, items size around their content.

Use CSS Grid for two-dimensional layouts (rows and columns at once): page templates, photo galleries, dashboards, anything where you need explicit tracks and alignment in both directions. Grid is layout-first, you define the structure and place items into it.

Rule of thumb:
- Aligning items in a line → Flexbox
- Building a true grid of rows and columns → Grid
- A real page often uses Grid for the overall skeleton and Flexbox inside individual cells.

Both support the gap property and the same alignment keywords (justify-content, align-items), so the skills transfer.

Key Features

• Interactive live preview
• All container properties (direction, wrap, justify, align)
• All item properties (grow, shrink, basis, align-self, order)
• Add and remove flex items
• Click items to edit individual properties
• Gap control for spacing
• 8 preset layout patterns
• Copy ready-to-use CSS code
• Canonical flex shorthand output (toggle on/off)
• Copyable matching HTML markup block
• Visual learning tool
• Material Design-inspired UI
• 100% client-side processing
• No server communication
• Works offline
• Dark mode support
• Mobile-friendly interface