flexbox generator

How to use the flexbox generator

  1. Start with the container controls: set flex-direction (row or column), flex-wrap, and gap.
  2. Adjust justify-content and align-items to position children along the main and cross axes.
  3. Click any child block to edit its individual properties: flex-grow, flex-shrink, flex-basis, order, and align-self.
  4. Add or remove children with the + and - buttons to test how the layout reflows.
  5. Toggle between CSS and Tailwind output tabs and copy the snippet.

When to use it

Flexbox is optimized for one-dimensional layout — a row or a column, not both at once. Use it for navigation bars, button groups, card footers, and any place where content should flow and wrap naturally. When you need both rows and columns together (a dashboard, a magazine grid), reach for CSS Grid. Most layouts combine both. Alternative: Flexbox Froggy is a game that teaches flexbox but can't output code for your own layout.

Example

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
}

.nav > .logo { flex: 0 0 auto; }
.nav > .links { flex: 1 1 auto; display: flex; gap: 2rem; }
.nav > .cta { flex: 0 0 auto; }

Standard top-nav with flexible middle links and fixed logo/CTA flanks.

Frequently asked questions

What does flex: 1 actually mean?
It expands to flex: 1 1 0% — grow to fill available space, shrink if needed, start from zero width. Use it for equal-width columns.
Why doesn't align-items: center work?
Usually because the parent doesn't have display: flex, or because the container has no height so there's no cross-axis to center along.
How do I make items wrap to the next row?
Set flex-wrap: wrap on the container. Without it, items stay on one line and shrink instead of wrapping.
What's the difference between gap and margins?
gap only applies between flex items, not on the outside edges. Margins add space everywhere. Use gap when you want even internal spacing without double-gaps between adjacent items.
Can I reverse item order on mobile?
Yes — either use flex-direction: column-reverse or assign order values to specific items in a media query.

Related tools

Last updated: 2026-04-22