From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/minmax()/index.html | 200 ++++++++++++++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 files/zh-cn/web/css/minmax()/index.html (limited to 'files/zh-cn/web/css/minmax()') 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..12a51de21a --- /dev/null +++ b/files/zh-cn/web/css/minmax()/index.html @@ -0,0 +1,200 @@ +--- +title: minmax() +slug: Web/CSS/minmax() +tags: + - CSS + - CSS函数 + - CSS网格 + - Web + - 参考 + - 实验 + - 布局 +translation_of: Web/CSS/minmax() +--- +

CSS函数minmax()定义了一个长宽范围的闭区间， 它与CSS网格布局一起使用。

+ +
/* <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)
+
+ +

语法

+ +

此函数包含两个参数，最小值 和 最大值.

+ +

每个参数分别是<length>、<percentage>、<flex>的一种，或者是max-content、min-content、或auto之一。

+ +

如果 最大值 < 最小值，则最大值被忽略并且minmax(最小值,最大值)被看成最小值。{{cssxref("flex_value","<flex>")}} 值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。

+ +

取值

+ +
+
{{cssxref("<length>")}}
+
非负长度。
+
{{cssxref("<percentage>")}}
+
相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。 如果网格容器的长宽取决于其轴的长宽，则<percentage> 必须取值为auto。{{glossary("user agent")}} 可将轨道的内部长宽贡献调整为网格容器的长宽，并按将导致百分比达到的最小值来增加轨道的最终长宽。
+
{{cssxref("<flex>")}}
+
单位为fr的非负维度，指定轨道弹性布局的系数值。每个<flex>长度的轨道都以其系数值比例均分剩余空间。
+
max-content
+
表示网格的轨道长度自适应内容最大的那个单元格。
+
min-content
+
表示网格的轨道长度自适应内容最小的那个单元格。
+
auto
+
作为最大值时，等价于 max-content。作为最小值时，它表示轨道中单元格最小长宽 (由{{cssxref("min-width")}}/{{cssxref("min-height")}})的最大值。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+
+

CSS

+ +
#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;
+}
+
+ +

HTML

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

Result

+ +

{{EmbedLiveSample("example", "100%", 200)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.grid-template-columns.minmax")}}

+ +

参考

+ + + + -- cgit v1.2.3-54-g00ecf