Flex container

Set a flex container's main direction and wrapping behavior.

Apply these utilities to a flex container. Direction chooses the main axis and item order; wrapping decides whether items stay on one line or form additional lines. Use a row for horizontal groups and a column for stacked controls or cards.

Quick reference

Example class	Expected declarations
`flex-row`	`flex-direction: row;`
`flex-row-reverse`	`flex-direction: row-reverse;`
`flex-col`	`flex-direction: column;`
`flex-col-reverse`	`flex-direction: column-reverse;`
`flex-wrap`	`flex-wrap: wrap;`
`flex-nowrap`	`flex-wrap: nowrap;`
`flex-wrap-reverse`	`flex-wrap: wrap-reverse;`

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

Choose the main axis

row and column arrange items on horizontal and vertical axes. The reverse forms reverse visual order without changing the source order.

Choose the main axis

HTML

<div class="wind-demo">
  <div class="wind-demo-note">Main axis changes with direction; reverse changes visual order.</div>
  <div class="wind-demo-frame flex flex-row gap-2">
    <div class="wind-demo-tile">A row</div><div class="wind-demo-tile">B</div><div class="wind-demo-tile">C</div>
  </div>
  <div class="wind-demo-frame flex flex-row-reverse gap-2">
    <div class="wind-demo-tile">A row-reverse</div><div class="wind-demo-tile">B</div><div class="wind-demo-tile">C</div>
  </div>
  <div class="wind-demo-frame flex flex-col gap-2">
    <div class="wind-demo-tile">A column</div><div class="wind-demo-tile">B</div>
  </div>
  <div class="wind-demo-frame flex flex-col-reverse gap-2">
    <div class="wind-demo-tile">A column-reverse</div><div class="wind-demo-tile">B</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-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.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-col",
        "flex-col-reverse",
        "flex-row",
        "flex-row-reverse",
        "gap-2"
      ]
    }
  }
}

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; }

Let items form lines

flex-wrap moves items onto additional lines, flex-nowrap keeps one line, and flex-wrap-reverse reverses the cross-axis line order.

Let items form lines

HTML

<div class="wind-demo">
  <p class="wind-demo-note">The frame is narrow enough to make wrapping visible.</p>
  <div class="wind-demo-frame flex flex-wrap w-64 gap-2">
    <div class="wind-demo-tile w-24">wrap 1</div><div class="wind-demo-tile w-24">wrap 2</div><div class="wind-demo-tile w-24">wrap 3</div><div class="wind-demo-tile w-24">wrap 4</div>
  </div>
  <div class="wind-demo-frame flex flex-nowrap w-64 gap-2">
    <div class="wind-demo-tile w-24">nowrap 1</div><div class="wind-demo-tile w-24">nowrap 2</div><div class="wind-demo-tile w-24">nowrap 3</div>
  </div>
  <div class="wind-demo-frame flex flex-wrap-reverse w-64 gap-2">
    <div class="wind-demo-tile w-24">reverse 1</div><div class="wind-demo-tile w-24">reverse 2</div><div class="wind-demo-tile w-24">reverse 3</div><div class="wind-demo-tile w-24">reverse 4</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-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.w-24 {
  width: 6rem;
}
.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-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "flex",
        "flex-nowrap",
        "flex-wrap",
        "flex-wrap-reverse",
        "gap-2",
        "w-24",
        "w-64"
      ]
    }
  }
}

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; }

Custom and named values

All seven class names are exact and have no value suffixes. flex-row and flex-col select the direction; their reverse forms reverse the visual direction. flex-wrap, flex-nowrap, and flex-wrap-reverse control line wrapping. They do not create the flex container; add display:flex separately.

Related guides: Utility grammar · Variants

Catalog details

flex-col

Field	Value
Catalog identifier	`v1.flex-col`
Class pattern	`flex-col`
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-container` (`4`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex-direction`

Accepted values

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

Declaration templates

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

Catalog examples

Example class	Expected declarations
`flex-col`	`flex-direction: column`

flex-col-reverse

Field	Value
Catalog identifier	`v1.flex-col-reverse`
Class pattern	`flex-col-reverse`
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-container` (`4`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex-direction`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"column-reverse"`

Declaration templates

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

Catalog examples

Example class	Expected declarations
`flex-col-reverse`	`flex-direction: column-reverse`

flex-nowrap

Field	Value
Catalog identifier	`v1.flex-nowrap`
Class pattern	`flex-nowrap`
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-container` (`4`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex-wrap`

Accepted values

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

Declaration templates

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

Catalog examples

Example class	Expected declarations
`flex-nowrap`	`flex-wrap: nowrap`

flex-row

Field	Value
Catalog identifier	`v1.flex-row`
Class pattern	`flex-row`
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-container` (`4`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex-direction`

Accepted values

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

Declaration templates

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

Catalog examples

Example class	Expected declarations
`flex-row`	`flex-direction: row`

flex-row-reverse

Field	Value
Catalog identifier	`v1.flex-row-reverse`
Class pattern	`flex-row-reverse`
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-container` (`4`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex-direction`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"row-reverse"`

Declaration templates

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

Catalog examples

Example class	Expected declarations
`flex-row-reverse`	`flex-direction: row-reverse`

flex-wrap

Field	Value
Catalog identifier	`v1.flex-wrap`
Class pattern	`flex-wrap`
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-container` (`4`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex-wrap`

Accepted values

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

Declaration templates

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

Catalog examples

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

flex-wrap-reverse

Field	Value
Catalog identifier	`v1.flex-wrap-reverse`
Class pattern	`flex-wrap-reverse`
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-container` (`4`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`flex-wrap`

Accepted values

Kind	Suffix	Emitted value
`exact`	`null`	`"wrap-reverse"`

Declaration templates

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

Catalog examples

Example class	Expected declarations
`flex-wrap-reverse`	`flex-wrap: wrap-reverse`

Flex container

Quick reference

Examples in use

Choose the main axis

Let items form lines

Custom and named values

flex-col

Accepted values

Declaration templates

Catalog examples

flex-col-reverse

Accepted values

Declaration templates

Catalog examples

flex-nowrap

Accepted values

Declaration templates

Catalog examples

flex-row

Accepted values

Declaration templates

Catalog examples

flex-row-reverse

Accepted values

Declaration templates

Catalog examples

flex-wrap

Accepted values

Declaration templates

Catalog examples

flex-wrap-reverse

Accepted values

Declaration templates

Catalog examples

Revision History