Flexbox Generator

Flexbox distributes items along a single axis, main and cross, and handles nearly every navbar, button list and content column alignment.

`flex-direction` sets the main axis (row or column) and is the first decision in any flex layout. `justify-content` aligns items along the main axis, `align-items` aligns along the cross axis, and `align-content` only comes into play once `flex-wrap: wrap` is active and there is more than one line of items. At the item level, `flex-grow` controls how much it grows to fill leftover space (0 means it never grows), `flex-shrink` controls how much it shrinks when space is tight, and `flex-basis` sets the starting size before grow/shrink kick in, generally more predictable than using `width` directly. The `order` property changes an item's visual position without touching the actual HTML order, items with a lower `order` appear first, the default for every item is 0.

Configure the container, then fine-tune each item individually.

1. Pick a preset or set direction, wrap, justify-content, align-items and gap on the container.
2. Click an item in the preview to select it and adjust grow, shrink, basis, align-self and order. Drag items to reorder them visually.
3. Copy the container and per-item CSS, or switch to Tailwind whenever the configuration has an equivalent on the default scale.

Use this tool on your site

<iframe
  src="https://jkit.tools/embed/en-US/flexbox-generator"
  width="100%"
  height="600"
  style="border:0"
  loading="lazy"
  title="Flexbox Generator"
></iframe>

Sources and references for this tool

These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.

• CSS Flexible Box LayoutMDN Web Docs, Complete Flexbox reference.
• flexMDN Web Docs, Syntax for the flex-grow/shrink/basis shorthand.
• CSS Flexible Box Layout Module Level 1W3C, Official W3C specification for Flexbox.

Frequently asked questions

Where to go next