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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
<flex> | Chrome Full support 29 | Edge Full support 12 | Firefox Full support 40 | IE Full support 10 | Opera Full support 28 | Safari Full support 10.1 | WebView Android Full support 57 | Chrome Android Full support 29 | Firefox Android Full support 40 | Opera Android Full support 28 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 2.0 |
Legend
- Full support
- Full support