How to build a CSS flexbox layout with a free generator
A CSS flexbox generator writes the flex properties for you while you watch the layout change. Here, click a layout under Preset Layouts or set the six Container Properties (flex-direction, justify-content, align-items, flex-wrap, align-content and gap), click an item in the Live Preview to give it its own flex-grow, flex-shrink, flex-basis, align-self or order, then press Copy CSS and Copy HTML.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). No account, nothing to install.
The CSS Code panel always contains one .flex-container rule with display: flex and the six container properties, plus a .flex-item-N rule for each item you changed from the defaults. The generator writes longhand properties, not the flex shorthand, and it does not cover inline-flex, nested containers or media queries. Flexbox lays out one row or column; for rows and columns together use the CSS grid generator.
Table of Use: common layouts and the CSS they write
| Job | Click or set | CSS written |
|---|---|---|
| Center content both ways | Center preset | justify-content: center; align-items: center; |
| Logo on the left, links on the right | Navbar preset | justify-content: space-between; align-items: center; |
| Equal-width columns | Equal Width preset, then flex-basis 0% on each item | flex-grow: 1; flex-basis: 0%; on each item |
| Fixed sidebar beside flexible content | Sidebar Layout preset, then flex-shrink 0 on Item 1 | flex-shrink: 0; flex-basis: 200px; on Item 1 and flex-grow: 1; on Item 2 |
| Cards that wrap onto new lines | Card Grid preset | flex-wrap: wrap; plus flex-basis: 200px; on each item |
| Stack items vertically | flex-direction: column | flex-direction: column; |
| Equal space around every item | justify-content: space-evenly | justify-content: space-evenly; |
| Push one item to the far end | Select the item, then align-self: flex-end | align-self: flex-end; in that item’s rule |
| Show an item first without moving its markup | Select the item, then order -1 | order: -1; in that item’s rule |
Once the layout works, style the boxes with the box shadow generator, the border radius generator or the gradient generator.
Features
- Six container controls. flex-direction (4 values), justify-content (6), align-items (5), flex-wrap (3) and align-content (6) are menus; gap is a slider from 0 to 100px.
- Per-item controls. Click an item in the Live Preview, or Tab to it and press Enter or Space. Then set flex-grow and flex-shrink (sliders from 0 to 5), flex-basis (typed), align-self (6 values) and order (-5 to 5).
- flex-basis check. Your browser validates what you type. An empty or invalid value turns the field red and is left out of the CSS, so the copied code is always valid.
- Add Item and Remove Item. Test the layout with more or fewer boxes. There is no upper limit, and the last remaining item cannot be removed.
- Six presets. Center, Space Between, Equal Width, Sidebar Layout, Navbar and Card Grid. A preset replaces the current container settings and items.
- Preview that matches the code. The preview box is at least 360px tall so column direction, align-items and align-content have room to show.
- Copy CSS and Copy HTML. The HTML Structure panel gives a
flex-containerdiv with numbered items. If clipboard access is blocked, the button says so. - Private and free. Nothing is uploaded and nothing is saved; reloading resets the tool.
Generated CSS is plain and readable. Tidy it with the CSS beautifier or compress it for production with the CSS minifier.
How to use the flexbox generator
- Under Preset Layouts, click the closest match, or skip this step to start from three items in a row with a 16px gap.
- Under Container Properties, choose flex-direction, justify-content, align-items, flex-wrap and align-content, and drag the gap slider.
- In Live Preview, click an item to select it. The heading Item Properties (Item 1) shows which item you are editing.
- Set its flex-grow, flex-shrink, flex-basis (for example 200px, 50% or calc(50% - 8px)), align-self and order. Repeat for other items.
- Press Add Item or Remove Item to change how many boxes the layout has.
- Read the CSS Code and HTML Structure panels, then press Copy CSS and Copy HTML.
- Paste the CSS into your stylesheet and the HTML into your page, and rename
flex-containerandflex-item-1to names that fit your project. To see them together first, paste both into the HTML previewer.
Who can use it
- Front-end developers prototyping a navbar, toolbar or card row before writing the real component.
- Students learning CSS, who can change flex-direction and see justify-content and align-items swap axes in the preview.
- Designers checking how a layout behaves when items are added, removed or reordered, then adding a color from the color picker.
- Site owners and teachers: paste the rule into a CMS custom CSS box, or use the preview to explain the main and cross axes.
FAQs
How do I center a div with CSS flexbox?
Put display: flex, justify-content: center and align-items: center on the parent. The child is then centered horizontally and vertically, whatever its size. The parent needs a height taller than the child, or the vertical centering will not show. Click the Center preset in this generator to see exactly that rule, and a preview box at least 360px tall, so the vertical effect is visible.
What is the difference between justify-content and align-items?
justify-content spreads items along the main axis, the direction set by flex-direction. align-items positions them along the cross axis, the other direction. With flex-direction: row the main axis is horizontal, so justify-content moves items left and right and align-items moves them up and down. Switch to column and the roles swap. Change flex-direction in the tool to watch it happen.
What does flex: 1 mean in CSS?
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1 and flex-basis: 0%. Each item starts from zero width and shares the free space equally. This generator writes longhand properties, so to reproduce flex: 1, set flex-grow to 1 and flex-basis to 0% on each item. With flex-grow alone, items start from their content width and can end up unequal.
Why is align-content not working on my flex container?
align-content only affects containers with more than one line of items, so it needs flex-wrap: wrap or wrap-reverse and items that really wrap. On a single-line container it does nothing, and align-items is the property to use. This generator always writes align-content: stretch (or your choice) into the CSS. That is harmless on a single line, and takes effect once you turn wrapping on.
How do I make flex items wrap onto the next line?
Add flex-wrap: wrap to the container. The default, nowrap, keeps every item on one line and shrinks them to fit. With wrap, items that no longer fit move to a new line. Give each item a flex-basis such as 200px so it keeps a minimum width. The Card Grid preset sets exactly this, with four items of 200px, and the gap slider spaces them.
Should I use flexbox or CSS grid?
Use flexbox when content flows in one direction, a row or a column, as in a navigation bar, a button group or a form row. Use grid when rows and columns must line up together, as in a page layout or a gallery. They combine well: grid for the page frame, flexbox inside each cell.
Which values can I type into the flex-basis field?
Any value your browser accepts for flex-basis: auto, a length such as 200px or 12rem, a percentage such as 50%, or calc(), for example calc(50% - 8px). If the field is empty or the value is not valid, it turns red, the preview uses auto and the property is left out of the copied CSS, so the code you copy is always valid.
Does this flexbox generator upload my layout?
No. The preview and the CSS are produced by JavaScript in your browser, so nothing you set is uploaded (you can check the Network tab in DevTools). The tool does not save settings either: reload the page and it returns to three items in a row with a 16px gap. It is free, with no account and nothing to install.
Related CSS tools: animate a finished layout with the CSS animation generator, or convert plain CSS to SCSS with the CSS to SCSS converter.