CSS Flexbox Generator: Build Flex Layouts Visually and Export CSS

Flexbox is the go-to CSS tool for one-dimensional layouts — navigation bars, button groups, centering content, and card rows. But remembering which property goes on the container vs. the items, and what value produces exactly the spacing you want, takes practice. A CSS flexbox generator lets you configure flex properties visually and copy the ready-to-use CSS.

Try our CSS Flexbox Generator →

How Flexbox Works

Flexbox turns a container into a flex formatting context. Children of that container become flex items and are arranged along the main axis (horizontal by default).

.container {
  display: flex;
}

That single line is enough to start — items will now line up horizontally. Everything else is configuration.

Container Properties

These properties go on the flex container (the parent element).

`flex-direction`

Sets the main axis direction:

flex-direction: row;            /* Default: left to right */
flex-direction: row-reverse;    /* Right to left */
flex-direction: column;         /* Top to bottom */
flex-direction: column-reverse; /* Bottom to top */

When flex-direction: column, the main axis runs vertically. justify-content and align-items swap their visual effects accordingly.

`justify-content`

Distributes items along the main axis:

Value	Effect
`flex-start`	Pack items to the start (default)
`flex-end`	Pack items to the end
`center`	Center items
`space-between`	First/last items at edges, equal gaps between
`space-around`	Equal space around each item (half-space at edges)
`space-evenly`	Equal space between all items including edges

`align-items`

Aligns items along the cross axis (perpendicular to main axis):

Value	Effect
`stretch`	Items stretch to fill container height (default)
`flex-start`	Align to start of cross axis
`flex-end`	Align to end of cross axis
`center`	Center on cross axis
`baseline`	Align by text baseline

`flex-wrap`

Controls whether items wrap when they overflow:

flex-wrap: nowrap;        /* Default: single line, may overflow */
flex-wrap: wrap;          /* Wrap to next line when needed */
flex-wrap: wrap-reverse;  /* Wrap to previous line */

For responsive layouts with multiple items, flex-wrap: wrap combined with flex-basis or min-width on items is a common pattern.

`gap`

Adds space between flex items without affecting outer margins:

gap: 1rem;           /* Same gap in both directions */
gap: 1rem 2rem;      /* row-gap column-gap */

gap only applies between items, not between items and the container edge. Use padding on the container for outer spacing.

`align-content`

When items wrap across multiple lines, align-content distributes the lines along the cross axis (similar to how justify-content distributes items):

align-content: flex-start;
align-content: center;
align-content: space-between;
align-content: stretch; /* Default */

align-content has no effect when there is only one line of items.

Item Properties

These properties go on flex items (the children).

`flex-grow`

Determines how much an item grows relative to others when there is extra space:

.item-a { flex-grow: 1; }  /* Takes 1 part of extra space */
.item-b { flex-grow: 2; }  /* Takes 2 parts — twice as much as item-a */
.item-c { flex-grow: 0; }  /* Does not grow (default) */

`flex-shrink`

Determines how much an item shrinks relative to others when space is tight:

flex-shrink: 1;  /* Default: shrink proportionally */
flex-shrink: 0;  /* Do not shrink */

Setting flex-shrink: 0 prevents an item from getting squished — useful for icons, avatars, and fixed-width elements in a flex row.

`flex-basis`

Sets the item’s initial size before flex growth/shrink is applied:

flex-basis: auto;    /* Size based on width/height property */
flex-basis: 0;       /* Start from zero, grow from nothing */
flex-basis: 200px;   /* Start at 200px */
flex-basis: 25%;     /* Start at 25% of container */

`flex` Shorthand

flex combines flex-grow, flex-shrink, and flex-basis:

flex: 1;            /* flex: 1 1 0 — grow, shrink, basis zero */
flex: auto;         /* flex: 1 1 auto */
flex: none;         /* flex: 0 0 auto — rigid, no growing or shrinking */
flex: 0 1 200px;    /* No grow, can shrink, starts at 200px */

The most common values are flex: 1 (equal distribution) and flex: none (fixed size).

`align-self`

Overrides align-items for a specific item:

.item-special {
  align-self: flex-end; /* This item aligns to the end; others follow align-items */
}

`order`

Changes the visual order without changing DOM order:

.item-first { order: -1; } /* Appears before items with order: 0 */
.item-last  { order: 1;  } /* Appears after items with order: 0 */

Default order is 0 for all items.

Common Flexbox Patterns

Centering (Both Axes)

The most searched Flexbox use case:

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
}

.navbar .logo {
  flex: none;       /* Logo doesn't grow or shrink */
  margin-right: auto; /* Push remaining items to the right */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* Main content fills all available space */
}

footer {
  flex: none; /* Footer stays at its natural size */
}

Equal-Width Columns

.columns {
  display: flex;
  gap: 1rem;
}

.column {
  flex: 1; /* All columns share space equally */
}

Card Row with Wrapping

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 280px; /* Grow and shrink, start at 280px */
  min-width: 0;    /* Allow text truncation inside */
}

Media Object (Icon + Text)

A classic pattern for comments, notifications, and list items:

.media {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.media-icon {
  flex: none;         /* Icon stays fixed size */
  width: 40px;
  height: 40px;
}

.media-body {
  flex: 1;            /* Text takes remaining space */
  min-width: 0;       /* Prevent overflow */
}

Flexbox vs Grid

The two layout systems complement each other:

Use Case	Flexbox	Grid
Navigation bar	✓	—
Center a single item	✓	—
Card grid (equal size)	—	✓
Page layout (rows + columns)	—	✓
Aligning items in a row	✓	—
Complex overlapping layouts	—	✓
Wrapping item list	✓	✓

In practice, most projects use both: Grid for page structure, Flexbox for component internals.

Debugging Flexbox

Chrome, Firefox, and Edge all have a Flexbox inspector in DevTools. Click the flex badge next to a flex container in the Elements panel to overlay flex lines and alignment guides on the page.

The overlay shows the main axis direction, free space distribution, and which items have grown or shrunk.