diff options
Diffstat (limited to 'files/zh-cn/web/css/minmax/index.html')
| -rw-r--r-- | files/zh-cn/web/css/minmax/index.html | 199 |
1 files changed, 199 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/minmax/index.html b/files/zh-cn/web/css/minmax/index.html new file mode 100644 index 0000000000..221c997184 --- /dev/null +++ b/files/zh-cn/web/css/minmax/index.html @@ -0,0 +1,199 @@ +--- +title: minmax() +slug: Web/CSS/minmax +tags: + - CSS + - CSS函数 + - CSS网格 + - Web + - 参考 + - 实验 + - 布局 +translation_of: Web/CSS/minmax() +original_slug: 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 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> |