Use the free CSS Flexbox Generator below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
What Flexbox Is For
Flexbox is the layout system for one-dimensional designs: items arranged in a line, whether that line runs horizontally or vertically. Navigation bars, button groups, form rows, centered dialogs, and toolbars are all flexbox jobs. Before flexbox, centering something vertically was famously difficult, and distributing space between items required fragile margin tricks. Flexbox makes both trivial, which is why it became the default layout tool for components.
The core idea is a container with display: flex, whose children become flex items laid out along a main axis. By default the main axis runs horizontally, left to right. justify-content controls spacing along that axis, align-items controls alignment across it, and flex-wrap decides whether items wrap onto new lines or squeeze onto one. Those four properties answer most component layout questions.
How to Use the Tool
Choose a direction, a wrapping mode, and the two alignment values, then set the gap and the number of items. The preview shows boxes moving as you change settings, so you can see what each property does instead of memorizing definitions. When the arrangement looks right, copy the container CSS into your stylesheet and put your real content in the child elements.
Start with the defaults for a navigation bar: row direction, no wrapping, space-between justification, center alignment. For a centered dialog, use row direction with center justification and center alignment. For a vertical stack of form fields, switch direction to column and let alignment handle the rest.
Direction and Wrap
Flex-direction sets the main axis. Row is the default and suits horizontal layouts. Row-reverse flips the order, which is occasionally useful for right-to-left designs but confusing if used just to reorder items; prefer the order property for that. Column stacks items vertically, which suits forms, menus, and sidebars. Column-reverse flips the vertical order with the same caveat.
Flex-wrap controls overflow. Nowrap, the default, squeezes items onto one line, shrinking them if they have flexible sizes, or overflowing if they do not. Wrap lets items flow onto new lines, which is what you want for tag lists, chip groups, and galleries that should reflow on small screens. Wrap-reverse stacks new lines above instead of below, which is rarely needed but exists for completeness.
Justify and Align
Justify-content distributes space along the main axis. Flex-start packs items at the beginning, flex-end at the end, center in the middle. Space-between pushes the first item to the start and the last to the end, spreading the rest evenly: the classic navigation layout. Space-around gives each item equal space on both sides, so edge items sit half a gap from the container edge. Space-evenly makes all gaps, including the edge gaps, exactly equal.
Align-items works across the axis. Stretch, the default, makes items fill the container’s cross size, which is why flexbox cards in a row often share equal height automatically. Flex-start, center, and flex-end align items to one side or the middle. Baseline aligns items by their text baseline, which matters when items contain text of different sizes and you want the text lines to line up.
Gap and Item Counts
Gap is the modern replacement for margins between flex items. One value sets the spacing, the browser never adds a gap after the last item, and wrapping rows get the same spacing as columns when you set a row gap. If you still see tutorials adding margin-right to every item except the last, they predate gap support; gap is simpler and has no edge cases.
Flexbox Versus Grid
Use flexbox when your layout is a line and grid when it is a table. A toolbar is flexbox; a photo gallery is grid. A form is usually flexbox in its rows and columns separately, or grid when fields align in two dimensions. The confusion usually comes from card layouts, which look like a line when they wrap but are really a grid: if you need items to align in columns across rows, grid is the answer, because flexbox rows do not know about each other.
In practice, most components are flexbox and most page skeletons are grid. A header built with flexbox sits inside a page built with grid. Learning both is not optional for serious layout work, but learning which one fits each problem is the part that saves time.
Common Mistakes
The classic mistake is forgetting that flex properties apply to the container, not the items. Setting justify-content on a child does nothing; it belongs on the parent. Another is expecting vertical centering from justify-content in a row layout: in a row, vertical alignment is align-items, because the cross axis is vertical. Remembering that justify follows the main axis and align follows the cross axis prevents most confusion.
Also watch for items that refuse to shrink. Flex items have a default minimum size based on their content, so a long word or a wide image can force overflow even with wrapping on. The fix is min-width: 0 on the item, which permits shrinking below content size. This single rule solves a large share of “flexbox is broken” complaints, which are really minimum-size complaints.