CSS Flexbox Generator

Flexbox is built on two axes

The moment you give an element display: flex, that element becomes a flex container and its direct children become flex items. From there, two axes govern the layout: the main axis and the cross axis. flex-direction decides which is which. With row the main axis runs horizontally and the cross axis runs vertically; switch to column and the two swap places.

That sounds like a footnote, but it changes everything. justify-content always works on the main axis and align-items always works on the cross axis. In a row, justify-content: center centers things horizontally; flip flex-direction to column and the same line starts centering them vertically. This is where most Flexbox confusion comes from, which is why the axis hint in the tool stays on screen at all times.

The properties you put on the container

• flex-direction: sets which axis the items flow along and in which direction. It takes row, row-reverse, column and column-reverse.
• flex-wrap: decides what happens when the items no longer fit. The default, nowrap, squeezes everything onto one line; wrap lets items move to a new line.
• justify-content: distributes leftover space along the main axis. space-between pins the first and last item to the edges, space-around gives every item an equal share, and space-evenly makes all the gaps identical.
• align-items: aligns items on the cross axis. The default, stretch, makes items as tall as the container. baseline lines up text of different sizes on the same baseline.
• align-content: aligns the lines themselves on the cross axis. It only does anything when there is more than one line, which means wrapping has to be on.
• gap, row-gap and column-gap: set the space between items. They add nothing at the outer edges, only between the items.

The flex shorthand, and the part of flex: 1 nobody mentions

flex is shorthand for three properties: flex-grow, flex-shrink and flex-basis. When you write flex: 1, the browser expands it to flex: 1 1 0%. So you are not only setting a growth factor, you are also resetting the item's base size.

That is the whole difference. flex-grow: 1 on its own leaves flex-basis at auto, so every item starts at the width of its own content and only the leftover space gets shared out. Items with more text end up wider. flex: 1 zeroes the base size instead, so every item gets the same width no matter what is inside it. Reach for flex: 1 when you want equal columns, and flex-grow: 1 when you want columns that stay proportional to their content.

When flex-shrink refuses to work, min-width is usually why

Flex items default to flex-shrink: 1, so they shrink when space runs out. But there is a floor: an item will not go below its own min-content size. A long unbroken word, a table that will not reflow, or a string with nowhere to wrap will hold the item at its width and push it out of the container.

The fix is min-width: 0 on that item, or min-height: 0 in a column layout. It removes the implicit min-content floor and lets the item actually shrink. Nearly every case of text-overflow: ellipsis or overflow: hidden mysteriously doing nothing inside a flex item is solved by that one line.

align-items and align-content are not the same thing

Both align on the cross axis, but they align different things. align-items positions items within their own line. align-content positions the whole set of lines within the container.

With a single line, align-content does nothing at all, because there is no second line to push around. That is why the align-content buttons in the tool look inert while flex-wrap is nowrap. Turn wrapping on first, and the control starts to matter.

gap beats the old margin tricks

Spacing items used to mean adding margin-right to every child except the last one. gap removes the trick entirely: it only puts space between items, never at the outer edges, and it handles the vertical spacing once lines start wrapping. Flexbox gap has shipped in every current browser since 2021, so there is no reason to avoid it today.

order changes the visual order, not the real one

order moves items around on screen but leaves the HTML order untouched. Anyone tabbing through the page, and every screen reader, follows the source order instead. When the visual order and the reading order disagree, the page becomes hard to navigate.

Use order for small corrections and write the real structure in the correct order in your HTML. The same warning applies to row-reverse and wrap-reverse.

Flexbox or Grid?

In practice they are not rivals. The common approach is to build the page skeleton with Grid and then use Flexbox inside it for the card header, the button group or the navigation bar. If rows and columns have to stay aligned with each other, use Grid. If you need one direction of flow that stretches around its content, use Flexbox.

Why is the output so short?

The tool only writes the lines that differ from the CSS initial value. flex-direction: row, flex-wrap: nowrap and align-items: stretch are already the browser default, so they never reach the output. An item you never customised gets no rule of its own either. The block you copy therefore adds nothing your stylesheet does not need.

Common mistakes

• Writing align-items: center without giving the container any height. With no free space on the cross axis there is nothing to center.
• Putting justify-content on the item instead of the container. These properties only affect the element that has display: flex.
• Setting flex-basis and width together. In a row layout flex-basis wins and width is quietly ignored.
• Adding overflow: hidden to stop an overflow and forgetting min-width: 0.
• Expecting grandchildren to be flex items too. Flexbox applies one level deep, to direct children only.

If you need a quick result on the background and color side as well, the CSS gradient generator works the same way: change the settings, watch the preview, copy the code.