Flexbox & Grid

Flex

Utilities for controlling how flex items both grow and shrink.

Quick reference

Class	Description
flex-initial	flex: 0 1 auto
flex-1	flex: 1 1 0%
flex-auto	flex: 1 1 auto
flex-none	flex: none

Basic usage

Initial

Use flex-initial to allow a flex item to shrink but not grow, taking into account its initial size.

01

02

03

<div class="flex">
  <div class="flex-none w-64 ...">01</div>
  <div class="flex-initial w-128 ...">02</div>
  <div class="flex-initial w-80 ...">03</div>
</div>

Flex 1

Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size.

01

02

03

<div class="flex">
  <div class="flex-none w-64 ...">01</div>
  <div class="flex-1 w-128 ...">02</div>
  <div class="flex-1 w-40 ...">03</div>
</div>

Auto

Use flex-auto to allow a flex item to grow and shrink, taking into account its initial size.

01

02

03

<div class="flex ...">
  <div class="flex-none w-64 ...">01</div>
  <div class="flex-auto w-128 ...">02</div>
  <div class="flex-auto w-40 ...">03</div>
</div>

None

Use flex-none to prevent a flex item from growing or shrinking.

01

02

03

<div class="flex ...">
  <div class="flex-none w-64 ...">
    01
  </div>
  <div class="flex-none w-128...">
    02
  </div>
  <div class="flex-1 w-40...">
    03
  </div>
</div>

Arbitrary values

If you need to use a one-off flex value, use square brackets to generate a property on the fly using any arbitrary value.

<div class="flex-[2_2_0%]">
  <!-- ... -->
</div>