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. 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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support291640 No2810.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support572916404410.3 ?

See also

Document Tags and Contributors

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