hexagon

Flexbox Generator — Free CSS Flexbox Builder

Visually build and experiment with Flexbox layouts in real-time.

Live Preview

codeGENERATED CSS

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 16px;
}

Flexbox Reference

Main Axis

Defined by flex-direction. Horizontal for 'row', Vertical for 'column'.

Justify Content

Aligns items along the Main Axis (e.g., center, space-between).

Align Items

Aligns items along the Cross Axis (perpendicular to Main Axis).

Flex Grow

Defines the ability for a flex item to grow if necessary.

Flex Shrink

Defines the ability for a flex item to shrink if necessary.

Flex Basis

Defines the default size of an element before the remaining space is distributed.

Frequently Asked Questions

Flexbox: The One-Dimensional Workhorse

The properties that do the work

Six properties cover nearly every flex layout you'll write:

Property	Controls	The value you'll use most
flex-direction	Row or column flow	row (default) / column
justify-content	Main-axis distribution	space-between, center
align-items	Cross-axis alignment	center
gap	Spacing between items	8–24px — replaces margin hacks
flex-wrap	Overflow to next line?	wrap for chips/tags
flex: 1 (on children)	Who absorbs leftover space	The stretchy middle

The mental model that makes it click

Everything is axes: justify-content works along the flow direction, align-items across it — and both swap when direction changes to column, which is the single biggest source of confusion. The two sacred recipes: perfect centering (display flex, justify center, align center — the answer to a decade of vertical centering jokes) and the navbar (logo, flex: 1 spacer, actions — or justify-content: space-between).

Knowing when you've outgrown it

When you fight flexbox to make items align in both rows and columns — equal-height cards whose contents won't line up — that's the signal to switch to the grid builder, designed for exactly that. Within flex children, spacing decisions convert cleanly in the px to rem tool, and visual polish — radii, shadows — assembles in border radius and box shadow.