CSS Flexbox Generator

They control opposite axes. <strong>justify-content</strong> distributes items along the <em>main axis</em> — the direction set by flex-direction (horizontal for <code>row</code>, vertical for <code>column</code>). <strong>align-items</strong> positions items along the <em>cross axis</em>, which is perpendicular to the main axis. The classic trick to perfectly center one element is <code>justify-content: center; align-items: center;</code> — that pins it on both axes at once.

Flexbox is built around two axes. The <strong>main axis</strong> is the one your items flow along, set by <code>flex-direction</code>: <code>row</code> makes it horizontal, <code>column</code> makes it vertical. The <strong>cross axis</strong> is always perpendicular to it. The key gotcha: switching flex-direction to <code>column</code> swaps the meaning of justify-content and align-items, because the axes rotate. If centering &ldquo;stops working&rdquo; after you change direction, that swap is usually why.

By default (<code>nowrap</code>) a flex container forces every item onto a single line, shrinking them to fit even if they overflow. Setting <code>flex-wrap: wrap</code> lets items that do not fit drop onto new lines instead, so each keeps its natural size. Once you have multiple lines, <code>align-content</code> becomes meaningful — it controls how those lines are spaced within the container. With a single line, align-content has no visible effect.

<code>gap</code> sets a consistent space between flex items without needing margins on each child. It is far cleaner than the old margin hacks because it never adds space on the outer edges — only <em>between</em> items — and it works on both rows and wrapped lines. It is supported in every modern browser. You can also split it into <code>row-gap</code> and <code>column-gap</code> if you need different spacing in each direction.

Reach for <strong>flexbox</strong> for one-dimensional layouts — a row of buttons, a navbar, a centered card — where you care about distributing items along a single line. Reach for <strong>grid</strong> when you need two-dimensional control, aligning items into both rows and columns at once, like a page layout or an image gallery. They are complementary, and real pages routinely use grid for the overall structure and flexbox inside individual components.

That is the default <code>align-items: stretch</code> behaviour: when items have no explicit cross-axis size, flexbox stretches them to fill the container on the cross axis. Set <code>align-items</code> to <code>flex-start</code>, <code>center</code>, or <code>flex-end</code> to stop the stretching and let each item keep its natural size. You can also override a single item with <code>align-self</code> on that child.

Simply pick your options and read the result, which refreshes the instant you change something. There is nothing to submit and nothing to wait for.

No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.

No. The tool works entirely on your device, so the values you enter never leave your browser.