1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
|
---
title: minmax()
slug: Web/CSS/minmax()
tags:
- CSS
- CSS函数
- CSS网格
- Web
- 参考
- 实验
- 布局
translation_of: Web/CSS/minmax()
---
<p><a href="/zh-CN/docs/Web/CSS">CSS</a>函数<code><strong>minmax</strong></code><strong><code>()</code></strong>定义了一个长宽范围的闭区间， 它与<a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS网格布局</a>一起使用。</p>
<pre class="brush: css no-line-numbers notranslate">/* <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)
</pre>
<h2 id="语法">语法</h2>
<p>此函数包含两个参数，<em>最小值</em> 和 <em>最大值</em>.</p>
<p>每个参数分别是<code><length></code>、<code><percentage></code>、<code><flex></code>的一种，或者是<code>max-content</code>、<code>min-content</code>、或<code>auto</code>之一。</p>
<p>如果 <em>最大值</em> < <em>最小值</em>，则<em>最大值</em>被忽略并且<code>minmax(最小值,最大值)</code>被看成<em>最小值</em>。{{cssxref("flex_value","<flex>")}} 值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。</p>
<h3 id="取值">取值</h3>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd>非负长度。</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。 如果网格容器的长宽取决于其轴的长宽，则<code><percentage></code> 必须取值为<code>auto</code>。{{glossary("user agent")}} 可将轨道的内部长宽贡献调整为网格容器的长宽，并按将导致百分比达到的最小值来增加轨道的最终长宽。</dd>
<dt>{{cssxref("<flex>")}}</dt>
<dd>单位为<code>fr</code>的非负维度，指定轨道弹性布局的系数值。每个<code><flex></code>长度的轨道都以其系数值比例均分剩余空间。</dd>
<dt><code>max-content</code></dt>
<dd>表示网格的轨道长度自适应内容最大的那个单元格。</dd>
<dt><code>min-content</code></dt>
<dd>表示网格的轨道长度自适应内容最小的那个单元格。</dd>
<dt><code>auto</code></dt>
<dd>作为最大值时，等价于 <code>max-content</code>。作为最小值时，它表示轨道中单元格最小长宽 (由{{cssxref("min-width")}}/{{cssxref("min-height")}})的最大值。</dd>
</dl>
<h3 id="正式语法">正式语法</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<div id="example">
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight[3] notranslate">#container {
display: grid;
grid-template-columns: minmax(max-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;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><div id="container">
<div>
Item as wide as the content,<br/>
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></pre>
</div>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample("example", "100%", 200)}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th>规范</th>
<th>状态</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td>
<td>{{Spec2("CSS Grid")}}</td>
<td>初始定义</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.grid-template-columns.minmax")}}</p>
<h2 id="参考">参考</h2>
<ul>
<li>网格布局指南：<em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Track_sizing_and_minmax()">Basic concepts of grid layout - track sizing with minmax()</a></em></li>
<li>视频教程：<em><a href="http://gridbyexample.com/video/series-minmax/">Introducing minmax()</a></em></li>
</ul>
<section class="Quick_links" id="Quick_Links">
<ol>
<li> </li>
<li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS索引</strong></a></li>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout">CSS网格布局</a></li>
<li data-default-state="open"><a href="#"><strong>指南</strong></a>
<ol>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">网格布局的基本概念</a></li>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">与其他布局方法的关系</a></li>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">基于线的定位</a></li>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">网格模板区域</a></li>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用命名线布局</a></li>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">网格布局中的自动定位</a></li>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">网格布局中的盒模型对齐</a></li>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">网格、逻辑值和书写模式</a></li>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS网格布局和可及性</a></li>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS网格布局和渐进增强</a></li>
<li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">使用网格实现常见布局</a></li>
</ol>
</li>
<li data-default-state="open"><a href="#"><strong>属性</strong></a>
<ol>
<li><a href="/zh-CN/docs/Web/CSS/grid">grid</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-area">grid-area</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-column">grid-column</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-gap">grid-gap</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-row">grid-row</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-template">grid-template</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
<li><a href="/zh-CN/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
</ol>
</li>
<li data-default-state="open"><a href="#"><strong>术语表</strong></a>
<ol>
<li><a href="/zh-CN/docs/Glossary/Grid">网格（Grid）</a></li>
<li><a href="/zh-CN/docs/Glossary/Grid_lines">网格线（Grid lines）</a></li>
<li><a href="/zh-CN/docs/Glossary/Grid_tracks">网格轨道（Grid tracks）</a></li>
<li><a href="/zh-CN/docs/Glossary/Grid_cell">网格单元格（Grid cell）</a></li>
<li><a href="/zh-CN/docs/Glossary/Grid_areas">网格区域（Grid areas）</a></li>
<li><a href="/zh-CN/docs/Glossary/Gutters">网格间隙（Gutters）</a></li>
<li><a href="/zh-CN/docs/Glossary/Grid_Axis">网格轴（Grid Axis）</a></li>
<li><a href="/zh-CN/docs/Glossary/Grid_rows">网格行（Grid row）</a></li>
<li><a href="/zh-CN/docs/Glossary/Grid_column">网格列（Grid column）</a></li>
</ol>
</li>
</ol>
</section>
|
