What is flex-basis in CSS?

flex-basis sets the initial main-axis size of a flex item before the browser distributes any remaining free space. In a row-direction flex container it behaves like width; in a column container it behaves like height.

Why does the formula subtract gap * (items - 1)?

With N items per row there are N-1 gaps between them. Those gaps consume space before items are sized, so you must subtract that total gap width from the container width before dividing by the item count.

Should I use flex-basis or width?

Prefer flex-basis for flex children. width also works but can conflict with flex-shrink and flex-grow. Setting flex: 0 0 (shorthand for no grow, no shrink, explicit basis) is the most predictable approach.

Does this account for padding or border on items?

By default CSS uses box-sizing: content-box, so padding and border would be added on top of flex-basis. Switch to box-sizing: border-box (standard in most modern resets) and the generated value already accounts for the full visible item width.

What about percentage containers?

Enter the pixel value that equals 100% of your container at your target viewport. You can also switch the container width unit to % and the tool will generate a calc() expression instead of a raw px value.

Can I use this with flex-wrap: wrap?

Yes. The most common use case is flex-wrap: wrap together with a fixed flex-basis so items wrap to a new row once there is no more space. The generated CSS snippet includes flex-wrap: wrap by default.

CSS Flex Basis Calculator

Name: CSS Flex Basis Calculator
Availability: InStock
Author: Nham Vu

Enter a container width, item count, and gap to get the exact flex-basis value and copy-ready CSS for your flexbox layout.

Container

Container width

The total inner width of the flex container (excluding padding).

Container padding (each side)

Padding subtracts from the available width automatically.

Items & Gap

Items per row

Column gap between items

Row gap (optional)

Output Options

Use calc() expression (most readable) Include flex: 0 0 <value> shorthand Include flex-wrap: wrap on container Include box-sizing: border-box

Calculated Flex Basis

flex-basis —

Pixel equivalent —

Container

—

Items/row

—

Total gap

—

Generated CSS

/* Fill in the fields to generate CSS */

Visual Preview (proportional)

Showing 1 row(s) of 3 items.

Formula

flex-basis =

(containerWidth - gap × (n - 1)) / n

Summary

Enter a container width, item count, and gap to get the exact flex-basis value and copy-ready CSS for your flexbox layout.

How it works

Enter the total width of your flex container in pixels (or use a percentage/custom value).
Set the number of items you want per row.
Enter the gap size (column-gap) between items in pixels.
The calculator outputs the exact flex-basis value using the formula: (containerWidth - gap * (itemsPerRow - 1)) / itemsPerRow.
Copy the generated CSS and paste it directly into your stylesheet.

Use cases

Build a responsive card grid where exactly 3 or 4 cards sit side-by-side per row.
Prototype product listing pages with a fixed number of items per row without using CSS Grid.
Create equal-width nav tabs or button groups using flexbox.
Verify that your flex-basis and gap combination does not accidentally cause wrapping.
Convert a design mock with specific item counts into production-ready CSS values.
Teach junior developers how flex-basis interacts with gap and container width.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu