在此页

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

minmax() CSS function defines a size range greater than or equal to min and less than or equal to max . It is used with CSS Grids .

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法

/* <inflexible-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)
/* <fixed-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)
/* <inflexible-breadth>, <fixed-breadth> values */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)
					

A function taking two parameters, min and max .

Each parameter can be a <length> ， <percentage> ， <flex> value, or one of the keyword values max-content , min-content ，或 auto .

若 max < min , then max is ignored and minmax(min,max) is treated as min . As a maximum, a <flex> value sets the flex factor of a grid track; it is invalid as a minimum.

值

<length>

A non-negative length.

<percentage>

A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto 。 用户代理 may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.

<flex>

A non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex> -sized track takes a share of the remaining space in proportion to its flex factor.

max-content

Represents the largest max-content contribution of the grid items occupying the grid track.

min-content

Represents the largest min-content contribution of the grid items occupying the grid track.

auto

As a maximum, identical to max-content . As a minimum it represents the largest minimum size (as specified by min-width / min-height ) of the grid items occupying the grid track.

形式句法

minmax( [ <length> | <percentage> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] )
					

CSS properties

minmax() function can be used within:

• grid-template-columns
• grid-template-rows
• grid-auto-columns
• grid-auto-rows

范例

CSS

#container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}
#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
					

HTML

<div id="container">
  <div>
    Item as wide as the content, but at most 300 pixels.
  </div>
  <div>
    Item with flexible width but a minimum of 200 pixels.
  </div>
  <div>
    Inflexible item of 150 pixels width.
  </div>
</div>
					

结果

规范

规范	状态	注释
CSS 栅格布局 The definition of 'minmax()' 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
minmax()	Chrome 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 16	Firefox 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 44 完整支持 44 完整支持 28 Disabled Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 28 Disabled Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0

图例

完整支持

完整支持

不支持

不支持

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

• Grid Layout Guide: Basic concepts of grid layout - track sizing with minmax()
• CSS grids, logical values and writing modes

• Video tutorial: Introducing minmax()

元数据

• 最后修改： Oct 29, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS 栅格布局
4. 指南
   1. Basics concepts of grid layout
   2. Relationship to other layout methods
   3. Line-based placement
   4. Grid template areas
   5. Layout using named grid lines
   6. Auto-placement in grid layout
   7. Box alignment in grid layout
   8. Grids, logical values and writing modes
   9. CSS Grid Layout and Accessibility
   10. CSS Grid Layout and Progressive Enhancement
   11. Realizing common layouts using grids
5. 特性
   1. grid
   2. grid-area
   3. grid-auto-columns
   4. grid-auto-flow
   5. grid-auto-rows
   6. grid-column
   7. grid-column-end
   8. grid-column-gap
   9. grid-column-start
   10. grid-gap
   11. grid-row
   12. grid-row-end
   13. grid-row-gap
   14. grid-row-start
   15. grid-template
   16. grid-template-areas
   17. grid-template-columns
   18. grid-template-rows
6. 词汇表
   1. Grid
   2. Grid lines
   3. Grid tracks
   4. Grid cell
   5. Grid areas
   6. Gutters
   7. Grid Axis
   8. Grid row
   9. Grid column