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.

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!

• 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.

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.

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.

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.