Free · Fast · Privacy-first

CSS Flexbox Wrap

By default, a Flexbox container fits all items onto a single row even when they have to shrink well below their natural size to make that happen. Enabling flex-wrap changes that behaviour completely: items move onto new lines when they would otherwise exceed the container width, turning a single-row layout into a multi-row one without any media query intervention. FixTools shows you exactly how flex-wrap interacts with flex-basis, align-content, justify-content, and gap, so you can generate the correct ruleset for tag lists, wrapping navigation, and responsive card rows without guesswork. The live preview demonstrates the wrapping behaviour at any container width and with any item count.

⚡ Use Tool Now How it works

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

⚡

Enables flex-wrap and shows multi-row wrapping in live preview

🔒

Controls align-content for multi-row distribution

✨

Sets flex-basis for item width before wrapping triggers

CSS Tool

Grid Flexbox Builder

All processing happens in your browser — your files are never uploaded to any server.

🚀Open Grid Flexbox Builder

100% Free · No account · Works on any device

What flex-wrap Does and How to Control Multi-Row Flexbox Layouts

The flex-wrap property allows flex items to move onto new lines when they would otherwise exceed the container width, which fundamentally changes how Flexbox handles overflow. Without flex-wrap enabled, Flexbox compresses all items onto a single row regardless of how narrow the container becomes, which can make items unreadably small or force overflow that breaks the surrounding layout. Setting flex-wrap: wrap on the container tells Flexbox to start a new row whenever items would otherwise overflow the available width. Items flow left to right until the row is full, then the next item begins a new row below. The number of items per row depends on the width of the container and the size of each item, which means the layout adapts naturally as the container resizes. This produces a wrapping behaviour conceptually similar to a paragraph of text: items fill each row from left to right and wrap to a new line when space runs out.

Controlling the alignment of multiple rows after wrapping requires understanding the distinction between align-items and align-content, which is one of the most commonly confused points in Flexbox. The align-items property controls how items align on the cross axis within a single row, applying independently to each row of items. When items wrap onto multiple rows, align-content controls how those rows are distributed within the container on the cross axis as a group. The values mirror those of justify-content: flex-start stacks rows at the top of the container, flex-end stacks them at the bottom, center packs them in the middle, space-between distributes rows with equal gaps between them, and space-around gives rows equal space on both sides. The align-content property only has a visible effect when the total height of all rows is less than the container height, so the container needs an explicit height for align-content to do anything meaningful.

The flex-wrap property interacts with item sizing through flex-basis rather than through the width property directly. The flex-basis value sets the ideal size of an item before free space is distributed among siblings. Using flex-basis: 200px on items inside a wrapped container means each item starts at 200px wide and wraps to a new row when the remaining space on the current row drops below 200px. Using flex-basis together with flex-grow: 1 makes items expand to fill the remaining space on each row after wrapping has determined the row count. This combination produces behaviour closer to how CSS Grid auto-fill works, without the explicit track structure: items fill each row and then stretch to fill the leftover space, producing a wrapped layout with consistent per-row spacing that adapts to any container width.

Wrapping Flexbox layouts and CSS Grid auto-fill grids look similar at first glance but behave differently in important ways. A wrapping Flexbox row is independent of every other row, so items in row two do not align with items in row one and the row heights can differ based on content. A Grid with auto-fill enforces column alignment across all rows because the column tracks are defined at the container level. For tag lists and breadcrumb trails where row independence is desired, Flexbox wrap is the better choice. For card grids where consistent columns across rows are essential to the design, Grid auto-fill wins. The generator lets you build both versions of the same layout and compare them side by side, which makes the difference obvious without needing to read documentation about either system.

MDN: CSS Flexible Box Layout CSS Tricks: A Complete Guide to Flexbox

How to use this tool

💡

Open the Flexbox Generator, enable flex-wrap: wrap, set flex-basis on items to control when wrapping occurs, and set align-content to control row distribution. Click Copy CSS for the complete ruleset.

How It Works

Step-by-step guide to css flexbox wrap:

1
Enable flex-wrap
Set flex-wrap: wrap on the container to allow items to flow onto new rows when they exceed the available container width. The preview immediately shows items wrapping to new rows at the current preview width, and you can resize the preview to confirm the wrapping triggers at the expected breakpoint. The wrap-reverse value is also available for layouts where the first row should appear at the bottom of the container rather than the top.
2
Set flex-basis on items
Add a flex-basis value to each item to control the ideal item width before wrapping triggers. Smaller flex-basis values result in more items per row at any given container width; larger values cause earlier wrapping to additional rows. The flex-basis property is what determines when wrapping happens, so set it explicitly rather than relying on width or the default content-based sizing. A typical value for card layouts is between 200px and 320px depending on content density.
3
Set align-content for multi-row distribution
Choose an align-content value to control how the multiple wrapped rows are distributed vertically within the container when the total row height is less than the container height. Options include flex-start, flex-end, center, space-between, space-around, and stretch. This property only takes effect when there is extra vertical space inside the container, so confirm your container has an explicit height before expecting align-content changes to be visible in the preview.
4
Copy the complete ruleset
Click Copy CSS to copy the complete container ruleset and any per-item declarations, including flex-wrap, align-content, flex-basis on items, flex-grow values, and the gap. Paste the container ruleset onto your wrapper element and the item ruleset onto your child items. The output is plain CSS that works in every modern browser without prefixes, and it integrates with any framework or build pipeline without modification.

Real-world examples

Common situations where this approach makes a real difference:

Tag list on a blog post

A blog post displays up to twelve category and topic tags below its title, with each tag sized to its own text content rather than a fixed width. Using a Flexbox container with flex-wrap: wrap and gap: 8px lets the tags flow naturally onto multiple lines when the post column is narrow. Each tag sizes to its text content because no flex-basis is set, so a one-word tag stays compact while a longer multi-word tag expands as needed. No JavaScript is needed to calculate layout, and adding or removing tags through a content management system does not break the row structure at all.

Navigation links that wrap on mobile

A horizontal navigation bar with eight links needs to wrap onto two rows on mobile screens rather than shrinking each link to an unreadable size to fit on one line. Setting flex-wrap: wrap on the nav container with flex-basis: 120px on each link allows the browser to determine the row break point automatically based on available space. At 480px container width the layout produces four links per row; at 320px it produces three or fewer per row depending on the actual length of each link's text. The behaviour adapts continuously to the available space without breakpoint-specific rules.

Icon and label feature list

A feature list for a pricing page uses icon-plus-label flex items with flex-basis: 220px and flex-wrap: wrap on the container. On desktop, three features sit on each row with consistent spacing; on tablet, two features sit per row; on mobile, each feature takes its own full row. The flex-basis value controls the natural item width before wrapping triggers, and adding flex-grow: 1 expands items to fill the row width after wrapping so each row has consistent edge-to-edge spacing regardless of how many items it contains. The pricing page adapts cleanly across every device.

Form with wrapping field groups

A checkout form with eight input fields uses a wrapping Flexbox container with flex-basis: 260px on each field wrapper and gap: 16px between fields. On desktop, three fields sit side by side comfortably; on tablet, two fields per row; on mobile, each field takes a full row for easier input. This produces a fully responsive form layout from a single container ruleset with no media queries required for the field arrangement. Labels and help text inside each field wrapper stack vertically using a nested column-direction Flexbox.

When to use this guide

Use this when building a layout where flex items should flow onto multiple rows at narrow container widths, rather than shrinking to fit a single line.

Pro tips

Get better results with these expert suggestions:

Use flex-basis instead of width for wrapped items

Setting width on a flex item creates a hard size that does not interact cleanly with flex-grow and flex-shrink as intended by the Flexbox algorithm. The flex-basis property sets the starting size before free space is distributed, which works correctly with wrapping and with the grow and shrink behaviours. Use flex-basis for items in a wrapping Flexbox container and reserve the width property only for cases where you need a truly fixed size that should not flex at all under any circumstances, which is rare in practice.

Set align-content only when the container has an explicit height

The align-content property distributes wrapped rows within the available vertical space of the container. If the container has no explicit height, it shrinks to fit the content rows exactly and align-content has no extra space to distribute, so the property appears to have no effect. Add a height or min-height value to the container before expecting align-content values such as center, space-between, or space-around to produce any visible change in the row distribution. This is the most common debugging issue with align-content.

Add flex-grow: 1 to make items fill each row after wrapping

The flex-basis property alone makes items wrap onto new rows but leaves empty space at the end of partial rows where items did not reach the container edge. Adding flex-grow: 1 to each item makes them stretch after wrapping to fill that remaining space, producing rows where items expand to fill the container width edge to edge. This is appropriate for form fields and full-width content items but usually not for tags or buttons where natural content-based sizing is preferred for readability.

Test with different item counts to check partial row behaviour

A wrapped Flexbox layout with flex-grow: 1 looks noticeably different with seven items, where one stretched item sits alone on the last row, than with six items, where two equal items sit on the last row. If stretched partial rows look wrong for your design, switch the layout to CSS Grid with auto-fill, which handles partial row alignment more predictably than a wrapping Flexbox with flex-grow because Grid maintains consistent column widths across all rows regardless of how many items appear in the final row.

FAQ

Frequently asked questions

flex-wrap: wrap allows flex items to move onto new lines when they would otherwise overflow the container. Without it, items shrink to fit on one row regardless of how narrow the container becomes. With flex-wrap: wrap, items maintain their flex-basis size and move to a new row when there is not enough space on the current one. This turns a Flexbox container into a multi-row layout that adapts to container width.

align-items controls how items align on the cross axis within a single row. In a row-direction container, this is vertical alignment within each individual row. align-content controls how the rows themselves are distributed within the container when multiple rows exist and there is extra space. align-items applies per row; align-content applies to the collection of rows as a group. align-content only has an effect when the container is taller than the total height of all rows.

Set flex-basis on each item to control the ideal item width. The browser fits as many items as possible on each row given that width. For exactly three items per row in a 900px container with 24px gaps, set flex-basis to approximately 280px. For a more flexible approach, use a percentage: flex-basis: calc(33.333% - 16px) forces three items per row at any container width after accounting for gaps.

flex-wrap: wrap-reverse causes items to wrap upward onto new lines instead of downward. The first row is at the bottom of the container and subsequent rows appear above it. This is rarely used in production layouts but can be useful for chat interfaces, comment feeds, or any layout where newer items should appear at the bottom and older items wrap upward.

Use CSS Grid when you need items in different rows to align with each other in columns (like a card grid where prices and titles must line up across rows). Use wrapping Flexbox when items should flow naturally without needing to align across rows (like a tag list or navigation link group). Grid enforces column structure; Flexbox lets each row be independent.

flex-grow: 1 makes items expand to fill each row. On the last row, if there are fewer items than on previous rows, each item stretches to take an equal share of the full container width. A single item on the last row fills the entire width. If this looks wrong, remove flex-grow: 1 and accept that partial rows will have trailing empty space, or switch to CSS Grid with auto-fill which handles partial row widths more predictably.

Yes, but the result on the last row may be unexpected. justify-content: space-between spreads items to the edges of the container. On a full row this looks correct. On a partial last row, space-between pushes the last item to the far right, leaving a large gap between items. A common fix is to add invisible spacer elements equal in size to the flex items to fill the empty slots on the last row, or to use CSS Grid for layouts where last-row spacing must match other rows.

Yes. gap applies to the space between items both on the same row (column-gap) and between rows (row-gap). Using a single gap value applies the same spacing in both directions. Use row-gap and column-gap separately if vertical and horizontal spacing should differ. gap is supported in Flexbox containers in all modern browsers since 2021 and produces cleaner spacing than margin hacks because it does not add space at the outer edges.