CSS Flexbox Generator

How to Use the CSS Flexbox Generator

1. 1Set container properties — flex-direction, justify-content, align-items, wrap, and gap.
2. 2Configure each item with flex-grow, flex-shrink, and flex-basis.
3. 3Watch the live preview update as you change values.
4. 4Copy the generated CSS straight into your stylesheet.

Worked Example: How flex-grow Distributes Leftover Space

Say a flex container is 600px wide and holds three items, each with flex-basis: 100px. The items consume 300px, leaving 300px of free space. Now set their flex-grow values to 1, 2, and 3 — a total of 6 grow units. Each item gets its basis plus a share of the leftover proportional to its grow value: item 1 = 100 + (1/6 × 300) = 150px, item 2 = 100 + (2/6 × 300) = 200px, item 3 = 100 + (3/6 × 300) = 250px. They sum back to 600px exactly.

This is why the common “equal columns” recipe is flex: 1 on every item — that's shorthand for grow 1, shrink 1, basis 0. With a basis of 0, there is no starting width to reserve, so the entire container width is split by the grow ratios; three items at grow 1 each take exactly one third. Change one to grow 2 and it takes half again as much as the others. Set the values in the generator and watch the preview widths match this arithmetic — it turns the abstract grow/shrink/basis triple into something you can see.

The Mental Model That Unlocks Flexbox

Flexbox confuses people until one concept clicks: the two axes. Every flex container has a main axis and a cross axis, and almost every flex property acts on one or the other. The flex-direction property sets which is which: with row (the default), the main axis runs horizontally and the cross axis vertically; with column, they swap — the main axis runs vertically and the cross axis horizontally.

Once you internalise this, the two most-used properties stop being confusing. justify-content always aligns items along the main axis, and align-items always aligns them along the cross axis. In a row, that means justify-content spaces items left-to-right and align-items positions them top-to-bottom — but switch to a column and their effects flip, because the axes flipped. Whenever a flex layout does not behave as you expect, the first question to ask is “which way is my main axis pointing?” That single habit resolves the large majority of flexbox confusion.

The Flex Shorthand Explained

The flex property is shorthand for three values in order: flex-grow, flex-shrink, and flex-basis. Understanding the common combinations makes flexbox far more predictable. flex: 1 expands to 1 1 0 — grow to fill space, shrink if needed, and start from a basis of zero — which is the recipe for equal-width columns that ignore content length. flex: auto (1 1 auto) also grows and shrinks but starts from the item's content size, so items with more content get more room.

flex: none (0 0 auto) makes an item completely rigid — it neither grows nor shrinks, holding its natural size, which is perfect for icons, buttons, or avatars that should never distort. And flex: 0 1 auto, the default, lets items shrink but not grow. Knowing these four shorthands covers almost every layout need, and the generator lets you set the individual grow, shrink, and basis values to see exactly how each combination behaves in the live preview.

Flexbox vs Grid: Choosing the Right Tool

Flexbox and CSS Grid are complementary, not competing, and knowing when to reach for each saves a lot of fighting the layout. The key distinction is dimensionality: Flexbox is one-dimensional, laying items out along a single axis — a row or a column. Grid is two-dimensional, controlling rows and columns at once. If you are arranging things in a single line — a navigation bar, a row of buttons, a toolbar, centring one element — Flexbox is the natural, simpler choice.

If you are building a structure where both rows and columns must align — a full-page layout, a photo gallery, a dashboard of cards on a strict grid — Grid is the better tool, because it lets you define the overall structure explicitly rather than coaxing it out of a single axis. In practice, real websites use both constantly: Grid for the large-scale page skeleton, and Flexbox for aligning the contents within each grid area. They work beautifully together.

Common Patterns and Gotchas

A handful of flexbox recipes solve most everyday problems. Perfect centring — long the bane of CSS — is trivial: justify-content: center and align-items: centercentre a child both ways. A navigation bar with a logo on the left and links on the right is just justify-content: space-between. A responsive card grid that reflows without media queries comes from combining flex-wrap: wrap with a flex-basis on the items. And the gap property spaces items cleanly without the old margin hacks.

Two gotchas trip up even experienced developers. The first is the notorious min-width: autobehaviour: by default, a flex item will not shrink below the size of its content, which can cause overflow — long text or a wide child blowing out the layout. The fix is to set min-width: 0 (or min-height: 0 in a column) on the item to allow it to shrink properly. The second is that margin: auto inside a flex container is a powerful alignment tool — a single margin-left: auto pushes an item and everything after it to the far end of the row, handy for that classic “push this button to the right” layout. Knowing these behaviours turns flexbox from a source of mysterious bugs into a precise, dependable tool, and the live preview here is the fastest way to build the intuition.