Visually adjust Flexbox properties · Live preview · One‑click production‑ready CSS
Flexbox (Flexible Box) is a powerful CSS3 layout mode, ideal for responsive design, component alignment, and arranging items of unknown size. The ng.cc online Flexbox generator lets you visually adjust container properties (flex‑direction/justify‑content/align‑items etc.) and item properties (flex‑grow/flex‑shrink/order etc.), see the layout update in real time, and generate production‑ready CSS with one click. No need to memorize 20+ Flex properties or switch back and forth between browser and editor.
Covers 6 container properties and 5 item properties, including gap, align‑content, order. Drag sliders, pick from dropdowns – WYSIWYG.
Perfect center, equal grid, fixed sidebar, header‑content‑footer, card grid, holy grail. One‑click apply for rapid prototyping.
Change any property and the CSS code on the right updates instantly. Includes full container and item styles – ready to copy into your project.
Add/remove Flex items (max 6) to simulate real development scenarios and verify layout behaviour with different numbers of elements.
| Property | Values | Description |
|---|---|---|
flex‑direction | row, row‑reverse, column, column‑reverse | Defines the main axis direction (item flow). |
flex‑wrap | nowrap, wrap, wrap‑reverse | Controls whether items wrap to multiple lines. |
justify‑content | flex‑start, flex‑end, center, space‑between, space‑around, space‑evenly | Alignment along the main axis. |
align‑items | stretch, flex‑start, flex‑end, center, baseline | Alignment along the cross axis for a single line. |
align‑content | stretch, flex‑start, flex‑end, center, space‑between, space‑around | Alignment along the cross axis for multiple lines (requires flex‑wrap: wrap). |
gap | length value | Spacing between items. |
| Property | Values | Description |
|---|---|---|
flex‑grow | number (default 0) | Defines the ability for an item to grow relative to others. |
flex‑shrink | number (default 1) | Defines the ability for an item to shrink if necessary. |
flex‑basis | auto, length, % | Initial main size before free space is distributed. |
align‑self | auto, flex‑start, flex‑end, center, stretch | Overrides align‑items for this specific item. |
order | integer (default 0) | Controls the order in which items appear; lower values come first. |
justify‑content: center; align‑items: center; – classic modal centering.flex‑wrap: wrap; flex‑grow: 1; – items share available space evenly. Perfect for image galleries, card lists.flex‑grow:1 – common admin panel layout.flex‑direction: column; – header, content, footer fixed heights, content fills remaining space.flex‑grow:1 – the classic three‑column layout.flex: 1 mean?
flex: 1 is shorthand for flex‑grow: 1; flex‑shrink: 1; flex‑basis: 0%;. It makes the item take up available space proportionally – the most common way to create flexible items. You can simulate it here by setting flex‑grow to 1 and flex‑basis to 0.
align‑content work?
align‑content only works when there are multiple lines (i.e., flex‑wrap: wrap and enough items to wrap). If you have only one line, use align‑items. Try setting flex‑wrap to wrap and adding more items – then adjust align‑content to see the effect.
margin‑left: auto (not yet supported in this visual tool, but you can add it manually to the generated CSS).justify‑content: space‑between and insert an empty element before the first item.-ms- prefix). The code we generate works for 95% of production environments. If you need to support IE, use Autoprefixer afterwards.
This tool is part of the ng.cc design toolkit. You might also need:
⚡ All tools run locally in your browser, no data ever stored. Safe for commercial projects.