Utility Pages
Design Tools

CSS Flexbox Generator

Visually build Flexbox layouts. Live preview + copy CSS or Tailwind classes.

Live preview
1
2
3
4
5
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}
flex flex-row justify-start items-stretch flex-nowrap gap-2

Flexbox in 60 seconds

Add display: flex to a container and its children become flex items. Flex items are arranged along a main axis (row or column) and aligned on a cross axis. Five container properties handle most needs: flex-direction, justify-content, align-items, flex-wrap, and gap. Three item properties for fine control: flex-grow, flex-shrink, flex-basis (or the shorthand flex).

flex-direction: rows vs columns

Flexbox is one-dimensional — items go either left-to-right (row) or top-to-bottom (column). The direction determines what the “main axis” is.

  • row (default): main axis is horizontal. justify-content moves items left/right.
  • row-reverse: items flow right-to-left.
  • column: main axis is vertical. justify-content moves items up/down.
  • column-reverse: items flow bottom-to-top.

justify-content vs align-items

The most-confused pair in CSS layout. Memorize:

  • justify-content: distributes items along the MAIN axis. For a row, that's horizontal.
  • align-items: aligns items on the CROSS axis. For a row, that's vertical.

Common values for both:

  • flex-start: pack items at the start.
  • center: center items.
  • flex-end: pack items at the end.
  • space-between (justify-content only): equal space between items, none at ends.
  • space-around (justify-content only): equal space around each item.
  • space-evenly (justify-content only): truly equal space everywhere.
  • stretch (align-items only, default): items stretch to fill the cross axis.
  • baseline (align-items only): items align by text baseline. Useful for typography.

Common Flexbox patterns

  • Center anything: display: flex; justify-content: center; align-items: center; on the parent.
  • Equal-width columns: display: flex; on parent, flex: 1; on children.
  • Sticky footer: parent is column flex with min-height: 100vh, content has flex: 1, footer has flex: 0.
  • Navigation bar: row flex with justify-content: space-between to push logo left and nav right.
  • Card grid: row flex with flex-wrap: wrap and gap. Each card has flex: 0 0 calc(33.333% - gap).

Flexbox vs CSS Grid

A common question. Quick answer:

  • Flexbox = one-dimensional: a row OR a column. Best for components.
  • Grid = two-dimensional: rows AND columns simultaneously. Best for full page layouts.
  • Use both: Grid for the page macro layout, Flexbox for the contents of grid cells.

Gotchas: flex-shrink, min-width, content overflow

Flex items have min-width: auto by default — they refuse to shrink below their content size. This causes the classic “text overflow” bug when you add text-overflow: ellipsis to a flex child. Fix: add min-width: 0 to the flex item. Or use overflow: hidden in the right place.

Other gotchas: gap doesn't work in Safari before 14.1 (use margin), flex-wrap creates new flex lines (each line aligns independently with align-items), and flex shorthand flex: 1 means flex: 1 1 0% not flex: 1 1 auto.

For other CSS tools: CSS Gradient Generator, CSS Box Shadow Generator, and Color Palette Generator.

Frequently Asked Questions

What is Flexbox?▾
Flexbox (flexible box layout) is a CSS layout system for one-dimensional layouts — distributing space along a single axis (row or column). It's the modern way to build navigation bars, button groups, card layouts, and most UI components. Replaced floats and table-based layouts.
justify-content or align-items — which is which?▾
justify-content controls the MAIN axis (the direction items are laid out — horizontal for row, vertical for column). align-items controls the CROSS axis (perpendicular to main). For flex-direction: row, justify-content is left-to-right and align-items is top-to-bottom.
When should I use Flexbox vs Grid?▾
Flexbox: 1D layouts (rows OR columns of items). Best for navigation bars, toolbars, lists. Grid: 2D layouts (rows AND columns simultaneously). Best for page layouts, photo galleries, card grids. Modern sites use both — Grid for the page, Flexbox for components.
Why does my flex item overflow its container?▾
flex items have min-width: auto by default — they refuse to shrink below their content. Add `min-width: 0` (or `flex-shrink: 1` with explicit width) to allow shrinking. Common with text-overflow: ellipsis on flex children.
Does Flexbox work in older browsers?▾
Modern flexbox (without prefixes) works in all browsers since 2015 — IE11 supports an older spec with bugs. For 99%+ of modern web traffic, Flexbox is universally available. Use caniuse.com to verify specific properties.

Related Calculators

CSS Gradient Generator
Linear/radial/conic with copy CSS
CSS Box Shadow Generator
Multi-layer with live preview
Color Palette Generator
5 schemes export Tailwind/CSS/JSON