Flexbox Generator

Flexbox arranges items in a line and decides how they share space, align and wrap. It is the layout tool for navigation bars, toolbars, card rows and anything that sits in one direction. The confusing part is that the properties act on two perpendicular axes that swap when the direction changes. This playground lets you flip settings and watch the boxes respond, then copy only the properties that differ from the defaults.

The two axes

The main axis runs in the direction of flex-direction: left to right for row, top to bottom for column. The cross axis is perpendicular. justify-content distributes items along the main axis, and align-items places them on the cross axis; with flex-direction: column the roles swap, so justify-content then works vertically. When items wrap onto more than one line, align-content distributes the lines on the cross axis, which is why the page only writes it for wrapping containers.

A worked example

Press Sample to load a wrapping toolbar: direction row, wrap on, justify-content: space-between, align-items: center and a 12 pixel gap, with four items. The page writes display: flex;, flex-wrap: wrap;, justify-content: space-between;, align-items: center; and gap: 12px;. Row and stretch are the defaults, so flex-direction: row is left out. The items show how the item rules work. The first has flex: 1 1 120px; and the second flex: 2 1 120px;, so with free space the second grows twice as fast. The third has a 200 pixel basis and align-self: flex-start;, and the fourth has order: -1;, which moves it before all the others without changing the HTML.

Grow, shrink and basis

flex-basis is the size an item wants before sharing. flex-grow says how the leftover space is divided: items with 1, 1 and 2 share it one to one to two. flex-shrink says how overflow is divided when there is too little room; at 0 an item keeps its basis. The shorthand flex: 1 1 0 combines them, and the page writes it in full so nothing depends on defaults. An item with grow 0, shrink 1 and basis auto, the defaults, produces no rule.

Options worth knowing

gap spaces items without margins, including between wrapped lines. order changes visual order only, so keyboard and screen reader order still follow the HTML; avoid using it to reorder meaningful content. align-self overrides the container for one item. The checkbox “Include properties at their default value” writes every property, which is handy for teaching and for seeing the full picture.

Edge cases

A flex item will not shrink below its content’s minimum width unless you set min-width: 0 on it, a common cause of text overflowing its box. Percentages in flex-basis refer to the container size. In a column container with no height, flex-grow has nothing to share. Images can distort when stretched; set align-items: flex-start or give them object-fit. Wrapping rows with space-between leave a gap at the end of an incomplete last line.

Limits

The preview uses plain boxes with fixed text, so content-dependent sizing is only approximated. The page writes one container and numbered item rules; it does not nest containers. Everything is calculated in your browser.

Related tools

• CSS Grid Generator handles two-dimensional layouts.
• CSS Columns Generator flows text into columns.
• CSS Unit Converter converts the sizes you use for basis and gap.
• PX to REM turns pixel sizes into scalable rem values.