The CSS flex property

Q: What is the difference between flex: 1 and flex: auto?

flex: 1 ignores the item's content size and shares space evenly. flex: auto starts from the content size, then flexes — so larger items keep a head start.

Q: How do I stop a flex item from shrinking?

Set its flex-shrink to 0, for example with flex: none or flex: 0 0 auto. The item then keeps its size even when space is tight.

Q: What three properties does flex set?

flex-grow, flex-shrink and flex-basis, in that order. flex: 1 expands to flex: 1 1 0.

Property CSS All modern browsers Updated June 22, 2026

Quick answer

The CSS flex property is shorthand for three things on a flex item: flex-grow, flex-shrink and flex-basis. The common values are flex: 1 (grow to fill equal space), flex: auto (size to content but flexible) and flex: none (fixed, do not grow or shrink).

Overview

Where the alignment properties live on the flex container, flex lives on the items inside it. It controls how each item behaves when there is extra space to fill or a shortage to absorb, by bundling three properties into one: how eagerly it grows, how readily it shrinks, and the size it starts from.

You will mostly use the single-number form. flex: 1 tells every item to grow and share the spare space equally — three items each take a third of the row. Give one item flex: 2 and it takes twice the share of the others. flex: auto sizes items to their content first, then lets them flex; flex: none freezes an item at its content size so it never grows or shrinks.

The longhand flex: 0 1 200px reads as grow 0, shrink 1, start at 200px — a common recipe for a sidebar that holds its width but can give some back on small screens. Most of the time, though, flex: 1 on the items plus gap on the container gets you a clean, responsive row.

Syntax

selector > * {
  flex: grow shrink basis;
}

/* equal-width, responsive columns */
.col {
  flex: 1;
}

Values

The flex property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value	Description
`flex: 1`	Grow and shrink to share space equally with the other flex: 1 items.
`flex: auto`	Size to content, then grow and shrink as space allows.
`flex: none`	Fixed at its content size — never grows or shrinks.
`flex: 0 0 200px`	The explicit grow shrink basis form, here a fixed 200px column.
`flex: 2`	Take twice the share of spare space compared with a flex: 1 sibling.

Example

Live example

<style>
  .row { display: flex; gap: 10px; font: 600 14px system-ui, sans-serif; }
  .row div { background: #1c7ce9; color: #fff; padding: 16px; border-radius: 8px; text-align: center; }
  .a { flex: 1; }
  .b { flex: 2; }
  .c { flex: 1; }
</style>
<div class="row">
  <div class="a">flex: 1</div>
  <div class="b">flex: 2</div>
  <div class="c">flex: 1</div>
</div>

Best practices

Set flex on the items, not the container — the container gets display: flex and the alignment properties.
Use flex: 1 on each item plus gap on the container for clean, equal, responsive columns.
Reach for flex: none to stop an element — an icon, a fixed sidebar — from being squashed when space runs low.
Prefer the flex shorthand over setting flex-grow, flex-shrink and flex-basis separately; it resets all three to sensible defaults in one go.

Frequently asked questions

What does flex: 1 do?

It tells a flex item to grow and shrink so it shares the available space equally with its flex: 1 siblings. Three such items each take a third of the row.

What is the difference between flex: 1 and flex: auto?

flex: 1 ignores the item's content size and shares space evenly. flex: auto starts from the content size, then flexes — so larger items keep a head start.

How do I stop a flex item from shrinking?

Set its flex-shrink to 0, for example with flex: none or flex: 0 0 auto. The item then keeps its size even when space is tight.

What three properties does flex set?

flex-grow, flex-shrink and flex-basis, in that order. flex: 1 expands to flex: 1 1 0.

filter flex-direction

References