Flexbox Generator

About the Flexbox Generator

This flexbox generator turns the five properties that do most of the work in a flex container into dropdowns and sliders with an immediate visual answer. Choose a flex-direction, then set justify-content and align-items and watch which axis each one actually affects — the single most common source of confusion with flexbox. Add wrapping, set a gap between 0 and 64 pixels and padding on the container, then copy both the container rule and the accompanying child rule. A summary panel names the main and cross axes explicitly for the direction you have chosen.

How to use the Flexbox Generator

1. 1

   Choose a flex-direction — row, row-reverse, column or column-reverse — which sets the main axis.

2. 2

   Set justify-content to distribute items along that main axis, and align-items to position them on the cross axis.

3. 3

   Pick a flex-wrap value to decide whether items overflow on one line or wrap onto several.

4. 4

   Adjust the Gap and Padding sliders, then copy the container CSS and the child rule beneath it.

What people use it for

Main axis, cross axis and why alignment properties swap

Flexbox has no fixed notion of horizontal and vertical. It has a main axis, whose direction flex-direction sets, and a cross axis perpendicular to it. justify-content always distributes items along the main axis; align-items always positions them along the cross axis. With flex-direction: row the main axis runs horizontally, so justify-content controls left-to-right placement and align-items controls vertical placement. Switch to column and the two swap over entirely — this is exactly why a rule that centred something horizontally suddenly centres it vertically after a direction change. The reverse variants flip the direction items are laid out in without moving the axis itself, which also flips what flex-start and flex-end mean visually while leaving the DOM order and the tab order untouched. That last point matters: reordering visually without reordering the DOM produces a keyboard tab sequence that jumps around the screen, which WCAG treats as a failure of meaningful sequence.

The flex shorthand and why align-items sometimes does nothing

The generated child rule is flex: 0 1 auto, which is the shorthand for flex-grow: 0, flex-shrink: 1 and flex-basis: auto — the browser default. Grow decides whether an item claims a share of leftover space, shrink whether it gives up space when the container is too small, and basis the size it starts from before either applies. The widely used flex: 1 expands to 1 1 0%, which makes every item claim an equal share regardless of its content, whereas flex: auto expands to 1 1 auto and lets content size influence the result. As for align-items appearing to do nothing: it positions items within the cross-axis space available, and in a row container with no explicit height the container is only as tall as its tallest item, so there is no free space to align within. Give the container a height, or a min-height, and centre alignment starts working. The related align-content property is different again — it distributes wrapped lines as a group and has no effect at all on a single-line container.