Learn the Front-end Beta Search

flex

Definition

The flex CSS property is a shorthand property that sets how a flex item grows or shrinks to fit the space available in its flex container. It combines three properties: flex-grow, flex-shrink, and flex-basis. The flex property is essential for creating flexible and responsive layouts using CSS Flexbox.

Syntax

.card__body {
  flex: 1 1 0%;
}

Values

  • flex: <flex-grow> <flex-shrink> <flex-basis> shorthand.
  • auto: equivalent to 1 1 auto.
  • none: equivalent to 0 0 auto (element sized by content).
  • initial: equivalent to 0 1 auto.

Practical Examples

.card__body {
  flex: 1 1 0%;
}

.card__cta {
  flex: 0 0 auto;
}

Use shorthand to quickly define how flex items grow, shrink, and determine base size.

HTML
Tailwind flex-1
flex-1
flex: 0 0 auto
Auto width
Code
<div class="flex flex-wrap gap-4">
  <div class="flex w-full items-stretch gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm md:w-auto">
    <div class="flex flex-col gap-2">
      <span class="text-xs font-semibold uppercase tracking-wide text-slate-500">Tailwind flex-1</span>
      <div class="flex h-full min-h-[4rem] flex-1 items-center justify-center rounded-lg bg-slate-100 px-4 text-sm text-slate-700">flex-1</div>
    </div>
    <div class="flex flex-col gap-2">
      <span class="text-xs font-semibold uppercase tracking-wide text-slate-500">flex: 0 0 auto</span>
      <div class="flex h-full flex-none items-center justify-center rounded-lg bg-slate-100 px-4 text-sm text-slate-700" style="flex: 0 0 auto;">Auto width</div>
    </div>
  </div>
</div>

Tips & Best Practices

  • Use flex: 1 (1 1 0%) to make items share space evenly.
  • flex: none is great for buttons or labels that should not stretch.
  • Avoid mixing shorthand with individual properties on the same rule unless you know the override order.

Accessibility & UX Notes

Consistent sizing keeps layout predictable for keyboard navigation.

Browser Support

Supported in modern browsers (IE10+ requires vendor prefixes).

  • flex-grow, flex-shrink, flex-basis.
  • flex-flow for direction + wrapping.
  • gap for spacing between flex items.

Related posts