在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

<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.

句法

<flex> data type is specified as a <number> followed by the unit fr 。 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 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;
}
					

规范

规范	状态	注释
CSS 栅格布局 The definition of '<flex>' in that specification.	候选推荐	初始定义。

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
<flex>	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 40	IE 完整支持 10	Opera 完整支持 28	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 29	Firefox Android 完整支持 40	Opera Android 完整支持 28	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 2.0

图例

完整支持

完整支持

另请参阅

• CSS 栅格布局

元数据

• 最后修改： Oct 12, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS 栅格布局
4. CSS Types
5. 指南

   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. 特性

   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