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>
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 |
---|
CSS Grid Layout Module Level 2 # fr-unit |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
flex_value |
29 | 12 | 40 | 10 | 28 | 10.1 | 57 | 29 | 40 | 28 | 10.3 | 2.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value