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.


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.


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


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

Browser compatibility

ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<flex>Chrome Full support 29Edge Full support 12Firefox Full support 40IE Full support 10Opera Full support 28Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 29Firefox Android Full support 40Opera Android Full support 28Safari iOS Full support 10.3Samsung Internet Android Full support 2.0


Full support
Full support

See also