CSS Flexbox Generator

What is CSS Flexbox?

Flexbox, formally the CSS Flexible Box Layout, is a one-dimensional layout model for arranging a row or a column of items. You opt an element into flexbox with display: flex, and every direct child instantly becomes a flex item that can grow, shrink, reorder, and align itself along the row or column without floats, manual positioning, or negative margins. It is supported in every current browser with no prefixes required. See the CSS flexbox guide for the full property reference and real-world layout recipes.

The Controls on This Generator

Flexbox properties split into two groups, matching the two tabs above: properties you set on the Container (the parent with display: flex) and properties you set on the Selected Item (its direct children).

For what each individual property value actually does, see the CSS flexbox guide, which covers every property in the table above plus flex-flow and the flex shorthand.

Two Layout Patterns Worth a Closer Look

Equal-Width Columns

.columns { display: flex; gap: 16px; }
.columns > div { flex: 1; }

Sidebar with Flexible Main Content

.layout { display: flex; gap: 24px; }
.sidebar { flex: 0 0 240px; } /* fixed width, does not grow or shrink */
.main { flex: 1; } /* takes all remaining space */

Try the Sidebar Layout and Equal Columns presets above to see these live. For the Navbar, Centered Box, and Sticky Footer patterns, plus nested flexbox and nine more recipes, see the CSS flexbox guide.

Flexbox vs CSS Grid

Flexbox is one-dimensional (a single row or column); CSS Grid is two-dimensional (rows and columns together). The "grid-style" presets in this generator, like Equal Columns, are still one-dimensional under the hood and work well as flexbox; a true two-dimensional grid with explicit row and column tracks needs our Grid Generator instead. See the flexbox guide for the full comparison table.

Using This with Tailwind CSS and Bootstrap

Switch the output format above to get framework-specific classes instead of raw CSS. Tailwind's flex utilities map directly onto the same properties this generator controls, so the visual settings translate one-to-one; see the flexbox guide for the full CSS-to-Tailwind class table.

Bootstrap 5's flex utilities (d-flex, justify-content-between, align-items-center) cover most of the same ground, with one gap: Bootstrap's flex-grow-* and flex-shrink-* utilities only express 0 or 1, not arbitrary ratios. When your settings need a grow or shrink value above 1, the Bootstrap output includes a comment with the custom CSS needed alongside the utility classes.

How to Use This Generator

1. Start from a blank layout or click a Preset to load a common pattern
2. Adjust the Container tab to set direction, wrapping, alignment, and gap
3. Click any item in the preview, or use the Selected Item tab, to edit its grow, shrink, basis, order, and align-self
4. Drag items directly in the preview to reorder them; the order values update automatically
5. Use Add Item to test how the layout behaves with more content
6. Check the Tablet and Mobile breakpoint buttons to preview narrower widths
7. Switch between CSS, Tailwind, and Bootstrap output, then click Copy Code

Frequently Asked Questions

What is CSS Flexbox?

Flexbox (the CSS Flexible Box Layout) is a one-dimensional layout method for arranging items in a row or a column. You turn a container into a flex container with display: flex, and its direct children become flex items that can grow, shrink, reorder, and align along the main and cross axes without floats or manual positioning.

What is the difference between flex-grow, flex-shrink, and flex-basis?

flex-basis sets an item's starting size before extra space is distributed. flex-grow controls how much of the leftover space an item absorbs relative to its siblings. flex-shrink controls how much an item gives up when the container is too small to fit everyone at their basis size. All three are usually set together with the flex shorthand: flex: grow shrink basis.

Why won't my flex item shrink below its content size?

Flex items have an implicit min-width: auto (or min-height: auto in a column), which prevents them from shrinking smaller than their content, even with flex-shrink set. Long unbroken text or a fixed-size image is a common cause. Set min-width: 0 on the item to allow it to shrink past its content size, then add overflow or text-overflow rules as needed.

Do I need vendor prefixes for flexbox?

No. Flexbox has had full unprefixed support in Chrome, Firefox, Safari, and Edge since 2015. Vendor-prefixed flexbox (the old 2009 and 2011 syntaxes) is only relevant for Internet Explorer 10 and older Android browsers, which are no longer in active use.

Does flexbox support the gap property?

Yes. gap, row-gap, and column-gap work inside flex containers in every current browser, including Safari 14.1 and later. It replaces the old margin-based spacing hacks and does not add extra space around the outer edge of the container the way margins on items would.

Can I nest a flex container inside a flex item?

Yes. Any flex item can also be display: flex itself, creating a nested flex container with its own independent flex-direction, justify-content, and alignment. This is common for a card that is a flex item in a row of cards, but is internally a flex column to stack its own title, body, and footer.

Is this an AI flexbox generator?

No, and that is the advantage. This is a rule-based generator: the same control settings always produce the same predictable, editable CSS. There is no model guessing at your layout, so the output is exactly what you configured, every time.

Does this generator work with Tailwind CSS and Bootstrap?

Yes. Switch the output format to Tailwind to get the matching flex utility classes (flex, justify-*, items-*, gap-*, and so on), or to Bootstrap to get the equivalent d-flex utility classes. Where a framework's utility set cannot express an exact value, such as Bootstrap's flex-grow-0/1 only covering two states, the output includes a comment noting the limitation.