📐 CSS Flexbox Generator with Live Preview
By Shihab Mia · Updated 2026-07-15
Pick the properties and the preview plus the CSS update live.
This flexbox generator builds valid CSS Flexbox code for you visually: set flex-direction, justify-content, align-items, flex-wrap and gap, watch a live preview of several items rearrange in real time, then copy the generated CSS straight into your stylesheet. Flexbox is the one-dimensional CSS layout model for arranging items in a row or column, and this tool lets you see exactly how each property behaves before you write a single line by hand. Use it to center a box, build a navbar, space out a button row, or make a wrapping chip grid, without floats, table hacks or margin math. Every change updates the preview and the copy-ready code at the same time, so you learn the model by experimenting rather than memorizing.
What is the Flexbox Generator?
Flexbox (the CSS Flexible Box Layout) solves a problem that plagued web layout for years: distributing space and aligning items along one dimension without floats, table hacks or manual margins. You turn an element into a flex container with display: flex, and its direct children become flex items that you can align, space and order with a handful of properties. A flexbox generator like this one exposes those properties as controls so you can build the layout by sight and copy the result. It is the go-to approach for navigation bars, button rows, card toolbars, centering a box, and any layout that flows in one direction.
Every flex container has two axes, and understanding them is the key to flexbox. The main axis runs in the direction set by flex-direction (row goes left to right, column goes top to bottom), and the cross axis runs perpendicular to it. This matters because justify-content always aligns items along the main axis, while align-items aligns them along the cross axis. Switch flex-direction from row to column and the two properties effectively swap which way they push items, which is the single most common source of confusion for people learning flexbox. Once the axis model clicks, the rest of the properties fall into place.
The container-level controls handle the overall layout. flex-wrap decides whether items stay on one line (nowrap) or spill onto new lines (wrap) when they run out of room, which is the foundation of a simple responsive grid. gap adds consistent spacing between items without margins, so you never have to strip the margin off the last child. When items wrap onto multiple lines, align-content steps in to distribute those lines along the cross axis, which is different from align-items (that aligns items within a single line). Together these container properties decide how the whole set of items is arranged.
The item-level properties fine-tune each child individually, and this is where a flexbox generator saves the most guesswork. flex-grow sets how much of the leftover space an item claims (a value of 2 takes twice the share of a value of 1), flex-shrink sets how readily an item gives up space when the container is too small, and flex-basis sets the item size along the main axis before growing or shrinking happens. These three combine into the flex shorthand, where the common flex: 1 means grow to fill, shrink if needed, and start from a zero basis. align-self overrides the container align-items for one item, and order changes the visual sequence without touching the HTML.
Because flexbox is one-dimensional, it pairs naturally with CSS grid rather than competing with it. Reach for flexbox when you are laying out a single row or column of items whose sizes should flex to the content, such as a navbar, a toolbar or a list of tags. Reach for grid when you need explicit rows and columns at the same time, such as a page skeleton or an image gallery. Most real interfaces use both: grid for the macro structure and flexbox inside each component. This generator focuses on the flexbox half and shows each property in isolation so you can build an intuition for how they combine in production code.
All of the properties this flexbox generator outputs are supported in every current major browser, including the gap property inside flex containers, so the CSS you copy is safe to ship without vendor prefixes for modern targets. The generated code is plain, framework-free CSS: no Tailwind, no Bootstrap, no build step. That makes it equally useful as a learning aid, a quick prototyping surface, and a reference you can paste into any project and adjust by hand afterwards.
When to use it
- Centering a box both horizontally and vertically with justify-content: center and align-items: center.
- Building a navigation bar that pushes the logo left and the links right using justify-content: space-between.
- Laying out a row of cards or buttons with even gaps and consistent vertical alignment.
- Distributing leftover space with flex-grow so one column expands while the others stay fixed.
- Experimenting with row versus column direction to understand which axis each property controls.
- Creating a wrapping grid of tags or chips that reflows onto new lines on narrow screens.
How to use the Flexbox Generator
- Choose a flex-direction (row or column) to set the main axis.
- Pick justify-content to space items along the main axis.
- Pick align-items to align items along the cross axis.
- Set flex-wrap and the gap, and add align-content if your items wrap onto multiple lines.
- Adjust flex-grow, flex-shrink or the number of preview items to taste.
- Read the live preview, then click Copy to grab the generated CSS.
Formula & method
Worked examples
Perfectly center a single box inside its container.
- Set display: flex on the container.
- Keep flex-direction: row so the main axis is horizontal.
- Set justify-content: center to center along the main (horizontal) axis.
- Set align-items: center to center along the cross (vertical) axis.
Result: The item sits dead center both horizontally and vertically, no margins or transforms needed.
A navbar with the logo on the left and links on the right.
- Set display: flex and flex-direction: row.
- Set justify-content: space-between so the first and last items hug the edges.
- Set align-items: center to vertically center every item on the bar.
- Set flex-wrap: nowrap so the bar stays on one line.
Result: Logo pinned left, links pinned right, all vertically centered on one row.
A three-column layout where the middle column fills the remaining space.
- Set display: flex and flex-direction: row on the container.
- Give the left and right columns flex: 0 0 200px so they stay a fixed 200px wide.
- Give the middle column flex: 1 so it grows to absorb all the leftover space.
- Add a gap for spacing between the three columns.
Result: Fixed 200px sidebars on each side with a fluid middle column that stretches to fit any screen width.
Flex container properties (set on the parent)
| Property | Controls | Common values |
|---|---|---|
| flex-direction | Direction of the main axis | row, row-reverse, column, column-reverse |
| justify-content | Spacing along the main axis | flex-start, center, space-between, space-evenly |
| align-items | Item alignment along the cross axis | stretch, flex-start, center, baseline |
| flex-wrap | Single line or wrap to new lines | nowrap, wrap, wrap-reverse |
| align-content | Spacing of wrapped lines (cross axis) | flex-start, center, space-between, stretch |
| gap | Space between items | Any length, for example 12px or 1rem |
Flex item properties (set on the children)
| Property | Controls | Common values |
|---|---|---|
| flex-grow | Share of leftover space an item claims | 0 (default), 1, 2 |
| flex-shrink | How readily an item shrinks when space is tight | 1 (default), 0 |
| flex-basis | Starting size along the main axis | auto, 0, 200px, 25% |
| flex | Shorthand for grow, shrink and basis | 1, 0 0 auto, 1 1 200px |
| align-self | Overrides align-items for one item | auto, flex-start, center, stretch |
| order | Visual position without changing HTML order | 0 (default), any integer |
justify-content values and how they distribute items
| Value | Effect |
|---|---|
| flex-start | Items packed to the start of the main axis. |
| center | Items packed to the center of the main axis. |
| space-between | First and last items at the edges, equal space between. |
| space-around | Equal space around each item (half-size at the ends). |
| space-evenly | Equal space between all items and the edges. |
Common mistakes to avoid
- Mixing up justify-content and align-items. justify-content works along the main axis and align-items along the cross axis. The moment you change flex-direction from row to column, the two swap which way they move items. If centering is not working, check your direction first.
- Forgetting display: flex on the parent. Flex properties only do anything once the container has display: flex (or inline-flex). Setting justify-content on a plain block element has no effect at all.
- Confusing align-items with align-content. align-items positions items within a single line, while align-content distributes multiple wrapped lines along the cross axis. align-content does nothing unless flex-wrap is on and items actually wrap onto more than one line.
- Expecting align-items: stretch to work with a fixed size. stretch only fills the cross axis when items have no explicit size in that direction. If an item has a set height (in a row) it will not stretch, so remove the size to let it grow.
- Setting a width instead of flex-basis. On a flex item, flex-basis defines the main-axis size before growing and shrinking. Mixing width and flex-basis leads to surprises, because flex-basis wins on the main axis. Prefer the flex shorthand, for example flex: 1 1 200px.
- Confusing gap with margins. gap adds space only between items, never on the outer edges, so you do not get a stray margin on the last child. Reaching for margins instead often leaves uneven spacing at the ends.
Glossary
- Flex container
- An element with display: flex (or inline-flex) whose direct children become flex items.
- Flex item
- A direct child of a flex container, positioned and aligned by the flex properties.
- Main axis
- The primary axis set by flex-direction, along which justify-content distributes items.
- Cross axis
- The axis perpendicular to the main axis, along which align-items aligns items.
- flex-grow
- How much of the leftover free space an item claims relative to its siblings. Default is 0.
- flex-shrink
- How readily an item shrinks below its basis when the container is too small. Default is 1.
- flex-basis
- The size of an item along the main axis before flex-grow and flex-shrink are applied.
- gap
- A property that sets consistent spacing between flex items without using margins.
Frequently asked questions
What is a CSS flexbox generator?
A CSS flexbox generator is a visual tool that lets you set the main flexbox properties (flex-direction, justify-content, align-items, flex-wrap, gap and the flex item properties) and see a live preview of how items arrange, then copy the matching CSS into your project. It removes the trial and error of writing flex code by hand.
What is the difference between justify-content and align-items?
justify-content aligns items along the main axis (the direction of flex-direction), while align-items aligns them along the cross axis (perpendicular to it). With flex-direction: row, justify-content moves items horizontally and align-items moves them vertically. Switch to column and the two swap directions.
How do I center an element with flexbox?
Set display: flex on the parent, then justify-content: center and align-items: center. The child sits centered along both axes. This is the simplest way to center a single item or a group of items, and it works without margins, absolute positioning or transforms.
When should I use flexbox instead of CSS grid?
Use flexbox for one-dimensional layouts, a single row or column, such as navbars, button groups and toolbars. Use CSS grid for two-dimensional layouts with explicit rows and columns, such as page skeletons and galleries. Many pages use both: grid for the overall structure and flexbox inside components.
What does flex-wrap do?
flex-wrap controls whether items stay on a single line (nowrap) or flow onto additional lines when they run out of space (wrap). Using wrap is the simplest way to make a row of items reflow onto new lines on narrow screens, which is the basis of a lightweight responsive grid.
What is the difference between flex-grow, flex-shrink and flex-basis?
flex-basis sets an item size along the main axis before any flexing. flex-grow decides how much of the leftover space the item claims (higher values take a bigger share). flex-shrink decides how readily the item gives up space when the container is too small. They combine into the flex shorthand, for example flex: 1 1 200px.
What does flex: 1 mean?
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1 and flex-basis: 0. In plain terms it tells an item to grow and fill an equal share of the available space, shrink if needed, and ignore its content width as a starting point. Giving several siblings flex: 1 makes them share the row equally.
How is align-content different from align-items?
align-items aligns items within a single line along the cross axis. align-content distributes multiple lines along the cross axis and only has an effect once flex-wrap is on and the items actually wrap onto more than one line. If everything fits on one line, align-content does nothing.
Is the flexbox gap property supported in all browsers?
Yes. The gap property inside flex containers is supported in all current major browsers (Chrome, Edge, Firefox and Safari), so it is safe to use for spacing between items instead of margins in any modern project. Very old browser versions before 2021 are the only exceptions.
Does this flexbox generator produce responsive code?
The generator outputs the core flex properties, and combining flex-wrap: wrap with a gap and flexible item sizes gives you a layout that reflows across screen sizes. For fully responsive designs you add media queries around the generated CSS to change direction or wrapping at specific breakpoints.
Sources
- CSS flexible box layout: Basic concepts of flexbox , MDN Web Docs (Mozilla)
- A Complete Guide to Flexbox , CSS-Tricks
- gap property, flexbox browser support , Can I use