主页 / 问题 / 814870
Accepted
Артём PeGaS
Asked:2020-04-16 17:14:08 +0000 UTC2020-04-16 17:14:08 +0000 UTC

为什么元素会在网格容器中跳转？

  • 772

为什么元素没有缩小？他们会在达到最小宽度之前立即跳跃吗？ https://jsfiddle.net/baar6uoj/

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
  grid-gap: 20px;
}

.grid div {
  background-color: #28314E;
  border: 1px solid #212941;
  border-radius: 5px;
  padding: 8px 15px;
  color: #ffffff;
  font-size: 18px;
  font-family: roboto;
}

.grid div:nth-child(odd) {
  background-color: #475477;
}
<div class="grid">
  <div>item-1</div>
  <div>item-2</div>
  <div>item-3</div>
  <div>item-4</div>
</div>

html

1 个回答

  1. Best Answer

    事实是，这是minmax您正在观察的功能的正常操作。一开始我也很惊讶，但这就是它的创作方式，那是创作者的想法。

    该功能如何工作minmax？

    首先尝试“最大”大小。并且仅当像素中的“最小值”大于“最大值”时，才会应用“最小值”。但它始终默认为“最大”。因此，该功能在灵活单元和固定（在这种情况下为可变列数）的组合中是很好的。例如minmax(100px, 1fr).

    mimmax在这个例子中它是如何工作的？

    尽管如此，这些列仍在缩小。仅当可用容器宽度小于200px.

    并且在达到这个条件之前，元素会毫无问题地转移到新的生产线上，而不会减少。由于应用“最大值”没有问题，因此列没有缩小，而是结转。问题是默认情况下应用最大值，在这种情况下不会应用最小值，因为为了实现它，它的像素必须大于最大值，但这不会发生，因为100px会有总是少一点200px。

    • 2

相关问题