Generate CSS flexbox

Generate Flexbox container and item rules for direction, wrapping, alignment, and flexible sizes.

freeworks offlinenothing uploaded
ToolCSS Flexbox Generator
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Direction, wrapping, alignment, gap, grow, shrink, and basis become flex container and item declarations. Free space is distributed after base sizes and min/max constraints.

  • Row and center alignment suit common components.
  • Wrapping and item factors expose responsive behavior.

Worked example

Centered row layout with gap
Generate a wrapping flexbox row that centers items with 16px gap
Input
											Direction: row
Justify content: center
Align items: center
Flex wrap: wrap
Gap: 16
Item count: 3
Output
												/* Flexbox Container */
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Flex Items */
.flex-item {
  padding: 16px 24px;
  background-color: #4a90d9;
  color: white;
  border-radius: 4px;
  text-align: center;
}

<!-- HTML -->
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

When to use this

Navigation bars, card rows, and flexible forms generate Flexbox CSS.

Edge cases

  • flex-basis:auto uses content or width before distribution.
  • An unbreakable word can overflow despite flex-shrink.
  • min-width:auto can prevent shrinking below content.

References