Flexbox Generator with Tailwind Classes

Container properties: direction, alignment, wrap and gap

Flexbox lays out children along one axis at a time. flex-direction picks that main axis: row runs left to right, column top to bottom, and the -reverse values flip the order. Everything else is relative to it, which is the part that trips people up: justify-content always distributes items along the main axis and align-items always aligns them on the cross axis. Switch the direction to column in this flexbox generator and watch justify-content start moving items vertically.

justify-content controls leftover space on the main axis: flex-start and flex-end pack items at either end, center groups them in the middle, space-between pushes the first and last item to the edges, space-around gives each item equal space on both sides, and space-evenly makes every gap identical. align-items sets cross-axis alignment for every item; the default stretch makes items fill the container's height in a row, while center is the classic way to centre something vertically.

By default items stay on one line and shrink to fit. flex-wrap: wrap lets them break onto new lines, and only then does align-content matter, because it distributes those lines. gap sets the space between items without margins on the outer edges; separate row-gap and column-gap values are supported. Drag the corner of the preview to resize it and see wrapping happen live.

Item properties: grow, shrink, basis, order and align-self

Click any numbered box in the preview to edit it. flex-basis is the starting size before free space is shared out: auto uses the item's content or width, while a px or percentage value fixes the starting point. flex-grow decides how leftover space is divided, in proportion to each item's grow value, so an item with grow 2 takes twice the extra space of one with grow 1. flex-shrink does the same when there is not enough room; set it to 0 to stop a sidebar or icon from being squeezed. The three are written together as the flex shorthand, and that is what the CSS output uses.

order changes the visual position without changing the HTML, and align-self overrides align-items for one item. Use order with care: screen readers and keyboard focus follow the source order, not the visual one, so reordering important content can confuse people who do not use a mouse.

The presets cover common patterns: a centred box, a navbar with space-between, equal columns using flex: 1 1 0%, a fixed sidebar with a growing main area, wrapping cards, a vertical stack, and pushing the last item to the right by letting one item grow.

CSS and Tailwind output

The CSS tab writes a .container rule and only the .item-n rules that differ from the defaults, plus a matching HTML skeleton. The Tailwind tab maps every setting to real utilities rather than arbitrary values where Tailwind has one: flex-col, flex-wrap, justify-between, items-center, content-center, gap-4, flex-1, flex-none, shrink-0, basis-1/2, order-2 and self-end. Gaps that are not a multiple of 4px fall back to an arbitrary value such as gap-[10px]. For the full property list see the CSS Flexbox and Grid cheat sheet, and for two-dimensional layouts use the CSS Grid Generator.