时间戳

首页 > 解决方案 > minmax(auto, auto) 中的第一个“自动”计算为什么？

html - minmax(auto, auto) 中的第一个“自动”计算为什么？

问题描述

我对 中的第一个auto值感兴趣minmax(auto, auto)。

我注意到auto将是长度：当网格项min-width|width: auto; 和200pxif时最长单词的宽度min-width|width: 200px;。

我读过“如果用作最小值，则自动值表示单元格可以达到的最大最小尺寸。这个“最大最小尺寸”不同于 min-content 值，由 min-width/min-height 指定。 " （https://bitsofco.de/how-the-minmax-function-works/）。

为了理解这个斜体短语，是不是这样：width: 200px实际上也设置min-width为 200px？

否则，我想知道为什么作者忽略了 plainwidth也将决定auto.

标签： htmlcsscss-grid

解决方案

我的问题是它说“最大最小尺寸”是“由最小宽度指定”。但是，当您将纯文本添加width到网格项目时，该项目也不会缩小到其width. 我可以理解这width只是暗示min-width吗？

默认情况下，网格/弹性项目不能小于其定义的长度或内容大小（以较小者为准）。默认设置是min-width: auto（内联/行方向）和min-height: auto（块/列方向）。

以下是完整的解释：

您需要覆盖此设置（例如）以查看和min-width: 0之间的区别。widthmin-width

这里有几个例子（使用 flex）：

article {
  display: flex;
}

article:nth-of-type(1) > section {
  width: auto;
  flex-grow: 1;
}

article:nth-of-type(2) > section {
  width: 400px;
  flex-grow: 1;
}

article:nth-of-type(3) > section {
  width: 400px;
  flex-grow: 1;
  min-width: 250px;
  flex-shrink: 1;
}

article:nth-of-type(4) > section {
  width: 400px;
  flex-grow: 1;
  min-width: 0;
  /* can also use overflow property with any value other than `visible` */
}


/* non-essential demo styles */

article {
  margin-bottom: 25px;
}

section {
  white-space: nowrap;
  height: 50px;
  background-color: lightgreen;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
}

body {
  margin: 25px 50px;
}
<code>width: auto &amp; min-width: auto (default)</code>
<article>
  <section>With these settings, this item CANNOT shrink past its content size. Resize horizontally to see.</section>
</article>

<code>width: 400px &amp; min-width: auto (default)</code>
<article>
  <section>With these settings, this item CAN shrink past its content size, but CANNOT shrink past its defined width.</section>
</article>

<code>width: 400px &amp; min-width: 200px (override)</code>
<article>
  <section>With these settings, this item CAN shrink past its content size, but CANNOT shirnk past its min size.</section>
</article>


<code>width: 400px &amp; min-width: 0 (override)</code>
<article>
  <section>With these settings, this item CAN shrink past its content size AND its defined width.</section>
</article>

jsFiddle 演示

推荐阅读