No Login Data Private Local Save

Flex‑Basis Calculator & Visualizer - Online CSS Flex

7
0
0
0
Flex Container Width
600px
Item 1
Item 2
Item 3
Quick Presets
Live Visualization Exact Fit
Item 1
Item 2
Item 3
Item 1 Item 2 Item 3 | Total: 600px
Calculation Breakdown
Container Width600px
Total flex-basis600px
Remaining Space0px
Total flex-grow3.0
Space per grow unit0px
Frequently Asked Questions
What is flex-basis in CSS Flexbox?
flex-basis defines the initial main size of a flex item before any available space is distributed by flex-grow or flex-shrink. It essentially sets the starting size of an item along the main axis. The value can be a length (e.g., 200px), a percentage relative to the flex container (e.g., 50%), or the keyword auto (which uses the item's width or content size). If omitted in the flex shorthand, it defaults to 0 (though flex: auto sets it to auto).
flex-basis vs width — what's the difference?
While both set an element's size, flex-basis has higher priority in a flex context. If flex-basis is not auto, it overrides width. When flex-basis: auto, the item uses its width (or content size). Key difference: flex-basis only affects the main axis size in flex layout, while width always affects horizontal size regardless of layout mode. Use flex-basis for flex-specific sizing to avoid unexpected behavior.
How does flex-basis work with flex-grow and flex-shrink?
The three properties form the flex shorthand: flex: [grow] [shrink] [basis].

• Extra space (container > total basis): flex-grow distributes remaining space proportionally. Each item gets: basis + (grow / total-grow) × remaining.
• Shortage (container < total basis): flex-shrink reduces items proportionally. Shrink is weighted by shrink × basis, so larger items shrink more (unless shrink is 0).
• Exact fit: Items stay at their flex-basis size.

Use this tool's sliders above to see the math in action!
When should I use flex-basis: auto vs 0 vs a specific value?
• auto: Use when you want items to respect their intrinsic content size or explicit width. Great for navigation menus or when items have natural sizes.
• 0: Use when you want pure proportional distribution (all space divided by grow ratios). Perfect for equal-width columns where content size shouldn't influence layout.
• Specific value (e.g., 250px): Use for fixed-size components like sidebars, avatars, or when you need a minimum starting size. Combine with flex-grow: 0 to keep it fixed, or allow growing with flex-grow: 1.
How are percentage flex-basis values calculated?
Percentage flex-basis values are relative to the content-box width of the flex container. For example, if the container is 800px wide (content-box), flex-basis: 50% equals 400px. Note that container padding reduces the content-box, affecting the percentage calculation. In this tool, the visualization container uses box-sizing: border-box, and percentages are computed against the full container width for simplicity.
Why do my flex items shrink below their flex-basis even with flex-shrink: 0?
If flex-shrink: 0 is set, the item should not shrink below its flex-basis. However, items can still appear smaller due to: (1) min-width: auto on flex items (the default) may allow shrinking to fit content — set an explicit min-width: 0 to override; (2) overflow constraints; or (3) the total of all non-shrinking items exceeding the container width, causing overflow rather than shrinking. Always check min-width if you see unexpected shrinkage.
What's the difference between flex: 1 and flex: 1 1 0%?
flex: 1 is shorthand for flex: 1 1 0% — meaning flex-grow: 1, flex-shrink: 1, flex-basis: 0%. The zero basis means all items start from 0 and grow proportionally, resulting in perfectly equal columns regardless of content. In contrast, flex: auto (or flex: 1 1 auto) bases the initial size on content, so items with more content get more space. This distinction is crucial for creating truly equal-width layouts.
🔧 Related Tools