CSS <flex> Data Type

The CSS <flex> data type represents a flexible length used in CSS Grid layout. It combines a non-negative <number> with the fr unit to specify a track's share of the available space in a grid container.

Syntax

A <flex> value consists of a non-negative <number> immediately followed by the fr unit:

<flex> = <number>fr

Examples of flexible lengths include:

1fr
2fr
0.5fr
3.25fr

There is no space between the number and the fr unit.

The fr Unit

The fr unit represents a fraction of the available space in a grid container. Flexible grid tracks divide available space according to the flex factors specified by their fr values.

grid-template-columns: 1fr 1fr 1fr;

In this example, the three flexible tracks have equal flex factors, so each receives an equal share of the available space.

Distributing Available Space

When flexible tracks use different flex factors, the available space is distributed proportionally. For example, 1fr 2fr 1fr divides the flexible space into four shares. The first and third tracks each receive one share, while the second track receives two shares.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

The 2fr track therefore receives twice the flexible space allocated to either 1fr track.

Fixed and Flexible Tracks

Flexible lengths can be combined with fixed and other track sizing values. Space required by non-flexible tracks is accounted for before the remaining space is distributed among flexible tracks.

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
}

Here, the first column uses a fixed width of 200px. The remaining available space is then distributed between the other two columns according to their 1fr and 2fr flex factors.

<flex> Example

The following grid uses 1fr 2fr 1fr to create three flexible columns with proportional widths:

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
}

Browser Result

1fr

2fr

1fr

The center track receives twice the flexible space of either outer track because its flex factor is 2 instead of 1.

The <flex> data type is used by CSS Grid properties that define track sizes:

Specifications

The <flex> data type and fr unit are defined in the CSS Grid Layout Module Level 2 .

CSS <flex> Data Type