<flex>

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<flex>Chrome Full support 29Edge Full support 12Firefox Full support 40IE Full support 10Opera Full support 28Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 29Firefox Android Full support 40Opera Android Full support 28Safari iOS Full support 10.3Samsung Internet Android Full support 2.0

Legend

Full support  
Full support

See also

Связанные темы
  1. CSS
  2. CSS Reference
  3. CSS Grid Layout
  4. CSS Types
  5. Guides
    1. Auto-placement in CSS Grid Layout
    2. Basic Concepts of grid layout
    3. Box alignment in CSS Grid Layout
    4. CSS Grid Layout and Accessibility
    5. CSS Grid Layout and Progressive Enhancement
    6. CSS grids, logical values and writing modes
    7. Grid template areas
    8. Layout using named grid lines
    9. Line-based placement with CSS Grid
    10. Realizing common layouts using CSS Grid Layout
    11. Relationship of grid layout to other layout methods
    12. Subgrid
  6. Properties
    1. <angle-percentage>
    2. <angle>
    3. <basic-shape>
    4. <blend-mode>
    5. <custom-ident>
    6. <dimension>
    7. <frequency-percentage>
    8. <frequency>
    9. <gradient>
    10. <image>
    11. <integer>
    12. <length-percentage>
    13. <length>
    14. <number>
    15. <percentage>
    16. <ratio>
    17. <resolution>
    18. <shape>
    19. <string>
    20. <time-percentage>
    21. <time>
    22. <transform-function>
    23. <url>
    24. color
    25. flex
    26. grid
    27. grid-area
    28. grid-auto-columns
    29. grid-auto-flow
    30. grid-auto-rows
    31. grid-column
    32. grid-column-end
    33. grid-column-start
    34. grid-row
    35. grid-row-end
    36. grid-row-start
    37. grid-template
    38. grid-template-areas
    39. grid-template-columns
    40. grid-template-rows
    41. ident
    42. position