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 */
.grid { display: grid; grid-template-columns: 1fr 1fr 2.5fr 1.5fr; }
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of '<flex>' in that specification. | Candidate Recommendation | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
<flex> |
29 | 12 | 40 | 10 | 28 | 10.1 |
Mobile | ||||||
---|---|---|---|---|---|---|
<flex> |
57 | 29 | 40 | 28 | 10.3 | 2.0 |
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value