Home >CSS >CSS reference – properties, selectors, functions >flex

flex

flex: none | auto | <flex-grow> [<flex-shrink>] [<flex-basis>]

A shorthand that sets how a flexbox item grows and shrinks: flex-grow (its share of the free space), flex-shrink (its share when shrinking) and flex-basis (the initial size). The most common form, flex: 1, makes columns of equal width.

Values

  • flex: 1 (a single number) – 1 1 0%: the items share the whole width by the numbers regardless of their content. Two items with flex: 1 are equally wide, flex: 2 gets twice as much.
  • flex: auto – 1 1 auto: the items start from the size of their content and share only the remaining space (wider with longer text).
  • flex: none – 0 0 auto: a fixed size by content, it neither grows nor shrinks.
  • the initial value – 0 1 auto: the size by content, it does not grow, but it can shrink.
  • Three separate values: flex: 1 0 200px – grows, does not shrink, an initial width of 200 px.

Initial value: 0 1 auto. Inherited: no. Applies to: flexbox items.

Examples

The difference between flex: 1 and flex: auto for items with text of different lengths:

<div class="flex one">
  <div>short</div><div>longer item text</div><div>3</div>
</div>
<div class="flex auto">
  <div>short</div><div>longer item text</div><div>3</div>
</div>

.flex {
  display: flex;
  padding: 6px;
  border: 2px dashed #999;
}
.flex > div {
  padding: 6px 10px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.flex { max-width: 340px; margin-bottom: 8px; gap: 6px; }
.one > div { flex: 1; }
.auto > div { flex: auto; }
result
short
longer item text
3
short
longer item text
3

With flex: 1 all three are equally wide, with flex: auto the longer text is wider.

A sidebar with a fixed width and the content that fills the rest:

<div class="flex">
  <div class="sidebar">sidebar 100px</div>
  <div class="content">content – flex: 1</div>
</div>

.flex {
  display: flex;
  padding: 6px;
  border: 2px dashed #999;
}
.flex > div {
  padding: 6px 10px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.flex { max-width: 340px; gap: 6px; }
.sidebar { flex: 0 0 100px; }
.content { flex: 1; }
result
sidebar 100px
content – flex: 1

Things to watch out for

  • In the short form the omitted parts are set differently from the initial values: flex: 1 gives flex-basis: 0%, not auto. That is why flex: 1 and flex-grow: 1 behave differently.
  • Not even flex: 1 shrinks an item below the width of its longest word or image, because flex items have min-width: auto. A long URL or a table inside therefore breaks the layout – min-width: 0 on the item helps.
  • It is recommended to use the flex shorthand instead of the individual properties – it sets all three at once.

Browser support

Baseline – widely available: in all major browsers since September 2015, considered widely available since March 2018. Since version: Chrome 29, Firefox 22, Safari 9. As of October 2026 (MDN browser-compat-data).

Related:
flex-grow
flex-shrink
flex-basis
min-width
gap