Arrange CSS flexbox layouts with pickers for direction, wrapping, and alignment plus sliders for gap and items. Watch numbered boxes rearrange live, then copy the container CSS or download a snippet - all processing stays in your browser.
Technical Specifications
Properties and ranges used for every layout.
| Specification |
Details |
| Flex direction |
row, row-reverse, column, column-reverse - sets the main axis |
| Flex wrap |
nowrap, wrap, wrap-reverse - controls multi-line flow |
| Justify content |
flex-start, center, flex-end, space-between, space-around, space-evenly |
| Align items |
stretch, flex-start, center, flex-end, baseline |
| Gap |
0px to 60px, integers, single gap value for rows and columns |
| Items |
1 to 8 demo boxes, base size 40px to 120px, optional flex: 1 grow |
| Container height |
150px to 400px preview canvas height for cross-axis testing |
| Output |
.flex-container block plus .flex-item block with size and grow rules |
| Processing location |
100% client-side JavaScript in your browser memory; nothing is uploaded |
| Usage limit |
None - generate unlimited layouts for free, no signup required |
Understanding CSS Flexbox
CSS flexbox lays out items along one main axis with an optional wrap onto extra lines. The container declares display flex plus direction, wrap, alignment, and gap, while items control their own growth, shrink, and base size. Because spacing is computed by the browser, flexbox replaces float hacks and manual margin math for bars, rows, and stacks.
Main axis versus cross axis
Direction decides which axis is main: row lays out horizontally, column vertically, with reverse variants flipping the order. Justify-content works on the main axis, so centering a row spreads boxes horizontally, while align-items works across it, moving the same boxes vertically. The tall canvas here makes that split visible: change one picker at a time and watch which direction the boxes travel.
Wrapping, gaps, and growth
Nowrap forces every item onto one line and shrinks them if space runs short, which suits navbars and input rows. Wrap lets items start new lines with the same gap between rows and columns, which suits card grids and galleries. The gap property sets both row and column spacing in one line, and flex: 1 on items divides leftover space equally for fluid columns that resize with the viewport.
Flexbox or grid
Reach for flexbox when content flows in one direction: menus, button rows, form lines, and centered heroes. Reach for two-dimensional grids when rows and columns must align together, such as dashboards and photo walls, built with the Grid Generator. Many pages combine both: a grid page frame with flexbox rows inside each card. Round those cards with the Border Radius Generator for a finished look.
Honest limitations
This tool emits one gap value for both axes and one item rule shared by every box; it does not generate per-item order, align-self, or row-gap versus column-gap splits. Baseline alignment previews with same-size boxes look identical to flex-start until real text content differs. For keyframe entrances of laid-out items, continue with the Animation Generator.
Privacy and Client-Side Security
Privacy Guarantee: All generation occurs locally inside your browser. Your directions, alignments, and sizes are never transmitted, stored, or recorded on remote servers.
Many online editors save drafts or track style choices on a server, which is unnecessary for fixed-syntax CSS math. TinyToolzz keeps everything in-page: option mapping, string building, and preview styling run with plain JavaScript operations.
Because nothing is uploaded, there is no waiting, no account, and no copy of your design retained anywhere. Your values exist only in the tab's memory and are discarded when you close the page or click Reset.