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
Examples of correct values for the fr data type
1fr /* Using an integer value */
2.5fr /* Using a float value */
Example of use in a tracklisting for CSS Grid layout
.grid {
display: grid;
grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
}
Specifications
Specification | Status | Comment |
---|---|---|
CSS Grid LayoutThe 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.
Update compatibility data on GitHub
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
See also
<flex> by Mozilla Contributors is licensed under CC-BY-SA 2.5.