Flex item

Set flex growth, shrinkage, and the shorthand sizing behavior of an item.

Set a flex item's sizing behavior when the container has extra or insufficient room. The flex presets choose combinations of basis, growth and shrink; grow and shrink set those factors independently.

Quick reference

Example class	Expected declarations
`flex-1`	`flex: 1 1 0%;`
`flex-auto`	`flex: 1 1 auto;`
`flex-initial`	`flex: 0 1 auto;`
`flex-none`	`flex: none;`
`grow`	`flex-grow: 1;`
`grow-0`	`flex-grow: 0;`
`grow-[2]`	`flex-grow: 2;`
`shrink`	`flex-shrink: 1;`
`shrink-0`	`flex-shrink: 0;`
`shrink-[2]`	`flex-shrink: 2;`
`basis-auto`	`flex-basis: auto;`
`basis-1/2`	`flex-basis: calc(100% * 1 / 2);`
`order-first`	`order: -9999;`
`order-last`	`order: 9999;`

Example setup

Every preview explicitly starts from spec 1, reset "none", strict mode, spacingUnit "0.25rem", and no breakpoints. Numeric spacing values multiply that unit; no Tailwind theme is inherited. wind-demo classes are authored presentation scaffolding, with their CSS shown beside the exact HTML source.

Examples in use

Compare flex presets

The four presets share the available row differently because their flex-basis, flex-grow, and flex-shrink values differ.

Compare flex presets

HTML

<div class="wind-demo">
  <div class="wind-demo-note">Compare how each item uses its base size and available space.</div>
  <div class="wind-demo-frame flex w-72 gap-2">
    <div class="wind-demo-tile flex-1 w-16">flex-1</div>
    <div class="wind-demo-tile flex-auto w-16">flex-auto</div>
    <div class="wind-demo-tile flex-initial w-16">flex-initial</div>
    <div class="wind-demo-tile flex-none w-16">flex-none</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-initial {
  flex: 0 1 auto;
}
.flex-none {
  flex: none;
}
.w-16 {
  width: 4rem;
}
.w-72 {
  width: 18rem;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "flex-1",
        "flex-auto",
        "flex-initial",
        "flex-none",
        "gap-2",
        "w-16",
        "w-72"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Distribute extra space

grow expands an item at factor 1, grow-0 keeps the fixed item from expanding, and grow-[2] gets twice the free-space share of grow.

Distribute extra space

HTML

<div class="wind-demo">
  <p class="wind-demo-note">Extra space is split according to grow factors.</p>
  <div class="wind-demo-frame flex w-72 gap-2">
    <div class="wind-demo-tile grow">grow 1</div>
    <div class="wind-demo-tile grow-0 w-16">grow-0</div>
    <div class="wind-demo-tile grow-[2]">grow-[2]</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.grow-\[2\] {
  flex-grow: 2;
}
.w-16 {
  width: 4rem;
}
.w-72 {
  width: 18rem;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "gap-2",
        "grow",
        "grow-0",
        "grow-[2]",
        "w-16",
        "w-72"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Control compression

shrink items can compress below their starting widths; shrink-0 preserves its width. A factor of 2 gives the final item a larger share of the shrink.

Control compression

HTML

<div class="wind-demo">
  <p class="wind-demo-note">These starting widths are wider than the row.</p>
  <div class="wind-demo-frame flex w-64 gap-2">
    <div class="wind-demo-tile shrink w-48">shrink</div>
    <div class="wind-demo-tile shrink-0 w-48 wind-demo-alt">shrink-0 keeps its width</div>
    <div class="wind-demo-tile shrink-[2] w-48">shrink-[2]</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-alt {
  border-color: #b39761;
  background: #efe5cb;
  color: #483a1d;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.flex {
  display: flex;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.shrink-\[2\] {
  flex-shrink: 2;
}
.w-48 {
  width: 12rem;
}
.w-64 {
  width: 16rem;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-alt": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "gap-2",
        "shrink",
        "shrink-0",
        "shrink-[2]",
        "w-48",
        "w-64"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-alt { border-color: #b39761; background: #efe5cb; color: #483a1d; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Basis and order

basis-and-order uses exact supported Wind utility classes.

Basis and order

HTML

<div class="wind-demo-new flex"><span class="basis-auto order-first">first</span><span class="basis-1/2 order-last">last</span></div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-new {
  color: #203046;
  font: 14px / 1.5 system-ui, sans-serif;
}
.flex {
  display: flex;
}
.basis-1\/2 {
  flex-basis: calc(100% * 1 / 2);
}
.basis-auto {
  flex-basis: auto;
}
.order-first {
  order: -9999;
}
.order-last {
  order: 9999;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-new": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "basis-auto",
        "basis-1/2",
        "order-first",
        "order-last"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo-new { color: #203046; font: 14px/1.5 system-ui, sans-serif; }

Custom and named values

flex-1 is 1 1 0%, flex-auto is 1 1 auto, flex-initial is 0 1 auto, and flex-none is none. grow and shrink default to 1; the -0 forms use zero, and arbitrary numeric values such as grow-[2] are supported. Give the container display:flex to see the factors take effect.

Related guides: Utility grammar · Variants

Catalog details

flex-1

Field	Value
Catalog identifier	`v1.flex-1`
Class pattern	`flex-1`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`flex-item` (`5`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"1 1 0%"`

Declaration templates

Property	Value kind	Fixed value
`flex`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`flex-1`	`flex: 1 1 0%`

flex-auto

Field	Value
Catalog identifier	`v1.flex-auto`
Class pattern	`flex-auto`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`flex-item` (`5`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"1 1 auto"`

Declaration templates

Property	Value kind	Fixed value
`flex`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`flex-auto`	`flex: 1 1 auto`

flex-initial

Field	Value
Catalog identifier	`v1.flex-initial`
Class pattern	`flex-initial`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`flex-item` (`5`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"0 1 auto"`

Declaration templates

Property	Value kind	Fixed value
`flex`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`flex-initial`	`flex: 0 1 auto`

flex-none

Field	Value
Catalog identifier	`v1.flex-none`
Class pattern	`flex-none`
Grammar	`{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`flex-item` (`5`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"none"`

Declaration templates

Property	Value kind	Fixed value
`flex`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`flex-none`	`flex: none`

grow

Field	Value
Catalog identifier	`v1.grow`
Class pattern	`grow` or `grow-<suffix>`
Grammar	`{"acceptedKinds":["keyword","arbitrary"],"arbitraryProperty":"flex-grow","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`flex-item` (`5`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex-grow`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`null`	`"1"`
`keyword`	`"0"`	`"0"`

Declaration templates

Property	Value kind	Fixed value
`flex-grow`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`grow`	`flex-grow: 1`

shrink

Field	Value
Catalog identifier	`v1.shrink`
Class pattern	`shrink` or `shrink-<suffix>`
Grammar	`{"acceptedKinds":["keyword","arbitrary"],"arbitraryProperty":"flex-shrink","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`2`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`flex-item` (`5`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex-shrink`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`null`	`"1"`
`keyword`	`"0"`	`"0"`

Declaration templates

Property	Value kind	Fixed value
`flex-shrink`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`shrink`	`flex-shrink: 1`

basis

Field	Value
Catalog identifier	`v1.basis`
Class pattern	`basis-<suffix>`
Grammar	`{"acceptedKinds":["keyword","fraction"],"arbitraryProperty":null,"allowsFractionSlash":true,"allowsColorOpacity":false}`
Accepted values	`8`
Token categories	No token category
Negative-value policy	`forbidden`
Conflict group and rank	`flex-item` (`5`)
Order rank	`1`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex-basis`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"auto"`	`"auto"`
`keyword`	`"full"`	`"100%"`
`keyword`	`"px"`	`"1px"`
`keyword`	`"0"`	`"0"`
`keyword`	`"min"`	`"min-content"`
`keyword`	`"max"`	`"max-content"`
`keyword`	`"fit"`	`"fit-content"`
`keyword`	`"content"`	`"content"`

Declaration templates

Property	Value kind	Fixed value
`flex-basis`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`basis-auto`	`flex-basis: auto`

order

Field	Value
Catalog identifier	`v1.order`
Class pattern	`order-<suffix>`
Grammar	`{"acceptedKinds":["keyword","integer"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`3`
Token categories	No token category
Negative-value policy	`allowed`
Conflict group and rank	`flex-item` (`5`)
Order rank	`2`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`order`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"first"`	`"-9999"`
`keyword`	`"last"`	`"9999"`
`keyword`	`"none"`	`"0"`

Declaration templates

Property	Value kind	Fixed value
`order`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`order-first`	`order: -9999`

Flex item

Quick reference

Examples in use

Compare flex presets

Distribute extra space

Control compression

Basis and order

Custom and named values

flex-1

Accepted values

Declaration templates

Catalog examples

flex-auto

Accepted values

Declaration templates

Catalog examples

flex-initial

Accepted values

Declaration templates

Catalog examples

flex-none

Accepted values

Declaration templates

Catalog examples

grow

Accepted values

Declaration templates

Catalog examples

shrink

Accepted values

Declaration templates

Catalog examples

basis

Accepted values

Declaration templates

Catalog examples

order

Accepted values

Declaration templates

Catalog examples

Revision History