Flex Grow, Shrink & Basis

Flex Grow, Shrink & Basis

Control how individual flex items size themselves and consume free space.

Flex grow

Allow an item to grow to fill extra space:

<div class="flex">
  <div class="grow">Grows to fill</div>
  <div>Fixed</div>
</div>

• grow - flex-grow: 1.
• grow-0 - no growth (default).

Flex shrink

Allow an item to shrink when space is tight:

<div class="flex">
  <div class="shrink">Can shrink</div>
</div>

• shrink - flex-shrink: 1 (default).
• shrink-0 - never shrink.

Flex basis

Set the initial size before growth/shrink:

<div class="basis-1/3">One third</div>
<div class="basis-1/3">One third</div>
<div class="basis-1/3">One third</div>

Flex shorthand

flex-<n> combines grow, shrink, and basis:

Order

Reorder items with order-<n>:

<div class="order-2">Second</div>
<div class="order-1">First</div>

Any integer works; order-none resets.

TL;DR

• grow / grow-0 control growth.
• shrink / shrink-0 control shrinking.
• basis-1/2 sets the initial size.
• flex-1, flex-auto, flex-none are handy shorthands.
• order-<n> changes visual order.