CSS Flexbox Generator

Build flexbox layouts visually with a live, draggable preview. Adjust direction, alignment, wrapping, and gap, then copy ready-to-use CSS, Tailwind, or Bootstrap classes instantly.

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.

Flexbox solves the layout problems that used to require hacks: vertically centering content, distributing extra space between items, making a row of cards the same height, or reversing visual order without touching the HTML. It is supported in every current browser with no prefixes required.

Flexbox Syntax

Flexbox properties split into two groups: properties you set on the container (the parent with display: flex) and properties you set on the items (its direct children).

Flexbox Properties Explained

flex-direction

Sets the main axis that items are laid out along.

.container {
  flex-direction: row; /* default: left to right */
}

• row: items placed left to right (default)
• row-reverse: items placed right to left
• column: items placed top to bottom
• column-reverse: items placed bottom to top

flex-wrap

By default, flex items shrink to fit on one line. flex-wrap: wrap lets them flow onto additional lines instead of squeezing.

.container {
  flex-wrap: wrap;
}

justify-content

Distributes items along the main axis.

.container {
  justify-content: space-between; /* first and last items touch the edges */
}

align-items

Aligns items along the cross axis, on a single line. This is the property most people reach for to vertically center content in a row.

.container {
  display: flex;
  align-items: center; /* vertically centers items in a row */
}

align-content

Only has a visible effect when flex-wrap: wrap is set and there are multiple lines with leftover space in the cross axis. It controls how the lines themselves are spaced, not the items within a line.

gap

Sets consistent spacing between items without adding margin to the outer edge of the container. row-gap and column-gap can be set independently if you need different spacing on each axis.

.container {
  display: flex;
  gap: 16px; /* shorthand for row-gap and column-gap */
}

order

Changes the visual order of an item without touching the HTML. Items default to order: 0 and are sorted lowest to highest; items with the same order value keep their source order relative to each other.

.item-featured {
  order: -1; /* moves this item before all default-order siblings */
}

flex-grow, flex-shrink, and flex-basis

These three are usually set together with the flex shorthand.

.item {
  flex: 1 1 200px;
  /* flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
}

• flex-basis is the item's starting size before any growing or shrinking happens
• flex-grow is a ratio: an item with flex-grow: 2 takes twice as much of the leftover space as a sibling with flex-grow: 1
• flex-shrink is also a ratio, but for how much an item gives up when the container is too small; flex-shrink: 0 stops an item from shrinking at all

align-self

Overrides align-items for one specific item, useful for a single item that needs different cross-axis alignment than its siblings.

.item-standout {
  align-self: flex-end;
}

Common Flexbox Layout Patterns

Navbar with Logo and Links

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Vertically and Horizontally Centered Box

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

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 */

Sticky Footer

html, body { height: 100%; }
.page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.content { flex: 1; } /* pushes footer down when content is short */

Flexbox vs CSS Grid

Flexbox is one-dimensional: it lays items out along a single row or column, and items can wrap onto new lines but each line behaves somewhat independently. It is the natural choice for navbars, toolbars, button groups, and rows of cards where content drives the sizing.

CSS Grid is two-dimensional: it lays items into rows and columns at the same time, with explicit track sizes you define up front. It is the better fit for page-level layouts, dashboards, and anything where you want items to line up in both directions simultaneously.

A useful rule of thumb: if you are thinking in a single line of items, reach for flexbox. If you are thinking in rows and columns together, reach for grid. 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 is a separate tool.

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 (flex, flex-row, justify-between, items-center, gap-4, and so on) map directly onto the same properties this generator controls, so the visual settings translate one-to-one.

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.

What is the difference between Flexbox and CSS Grid?

Flexbox lays items out along a single axis, row or column, and is best for content-driven layouts like navbars, toolbars, and card rows where items can wrap and resize naturally. CSS Grid lays items out along two axes at once and is better for page-level or two-dimensional layouts where you want precise control over both rows and columns together. Many layouts, including the grid-style examples in this generator's presets, can be built with either, and flexbox is usually the simpler choice for a single row or column of items.

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.