The <flex> CSS data type denotes a flexible length within a grid container. It is used in grid-template-columns, grid-template-rows and other related properties.

Syntax

The <flex> data type is specified as a <number> followed by the unit fr. The fr unit represents a fraction of the leftover space in the grid container. As with all CSS dimensions, there is no space between the unit and the number.

Examples

1fr    /* Using an integer value */
2.5fr  /* Using a float value */

Specifications

Specification Status Comment
CSS Grid Layout
The definition of '<flex>' in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 29Edge Full support 16Firefox Full support 40IE No support NoOpera Full support 28Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 29Edge Mobile Full support 16Firefox Android Full support 40Opera Android Full support 44Safari iOS Full support 10.3Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support

See also

Document Tags and Contributors

Contributors to this page: mfluehr, fscholz, david_ross, Konrud, Sebastianz
Last updated by: mfluehr,