CSS workflow
Flexbox sizing, wrapping and source order
Flexbox arranges items along one main axis. A live preview helps explain the rules, but real text, intrinsic sizes and the containing element still decide the final result.
Content updated: · Maintainer and corrections
Choose the main and cross axes
flex-direction sets the main axis. justify-content distributes available space on that axis; align-items positions items on the cross axis. row and column are not interchangeable when available width and height differ.
Use flex-wrap when items may move onto another line. Changing a preview width is a test, not a responsive breakpoint or a media query.
Read grow, shrink and basis together
flex-basis is the starting main size. flex-grow shares positive free space; flex-shrink handles a shortage. Their visible effect depends on the items' intrinsic sizes, minimum sizes and the available space, so equal numbers do not guarantee equal rendered widths.
The generator supports whole-number grow and shrink values from 0 to 8, and auto or 0–600px basis values. Those are editor limits, not CSS limits. Test long words, images and real minimum sizes in the receiving layout.
Check when alignment can work
align-content distributes flex lines on the cross axis. It has no effect on a single-line flex container, and needs free cross-axis space to show a difference when lines wrap. A growing item can consume main-axis free space before justify-content has any to distribute.
The preview uses a fixed test width and height so you can inspect these cases. Copied CSS omits those test dimensions and the sample tile appearance; supply your project's actual container and content.
Keep source order meaningful
row-reverse and column-reverse reverse the visual direction; wrap-reverse reverses where flex lines stack. Neither changes HTML source order, which speech and sequential keyboard navigation still follow. Do not use visual reversal to repair an incorrect source order.
The tool deliberately does not offer drag-to-reorder, order, nested flex containers or saved projects. Test the copied HTML without CSS, then with keyboard navigation, zoom and narrow screens.
.layout { display: flex; flex-wrap: wrap; gap: 16px; }
.layout > .item { flex: 1 1 160px; }Data provenance