flex-basis

Definition

The flex-basis CSS property is used in flexbox layouts to define the initial size of a flex item along the main axis before any remaining space is distributed. It specifies the ideal size of the item, taking into account the available space and other factors like flex-grow and flex-shrink. The flex-basis property can be set to a specific length value (e.g., 200px), a percentage (e.g., 50%), or the auto keyword.

For example, flex-basis: 300px; would set the initial width of a flex item to 300 pixels.

Syntax

.card {
  flex-basis: 16rem;
}

Values

auto: base size from content or width/height.
<length> / <percentage>: explicit base size before growth/shrink.
content: size based on content (experimental).

Practical Examples

.card {
  flex-basis: 16rem;
  flex-grow: 1;

Set a starting width for flex items before they grow or shrink.

HTML

basis-16rem (Tailwind basis-64)

flex-basis: 12rem

Code

<div class="flex flex-wrap gap-4">
  <div class="flex flex-1 basis-64 items-center justify-center rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700">basis-16rem (Tailwind basis-64)</div>
  <div class="flex flex-1 items-center justify-center rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700" style="flex-basis: 12rem;">flex-basis: 12rem</div>
</div>

Tips & Best Practices

Use flex-basis: 0 with flex-grow: 1 to distribute space evenly.
Combine with min-width to prevent items from shrinking below usable sizes.

Accessibility & UX Notes

Predictable sizing ensures content like buttons remains accessible.

Browser Support

Supported across modern browsers.

flex, flex-grow, flex-shrink.
width/min-width for constraints.