Question

是否可以像CSS中的flex项一样缩小网格项？

网格项

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.child {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
}

<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

jsfiddle

弹性项目

.container {
  display: flex;
  margin-left: -10px;
  flex-flow: row wrap;
}

.child {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
  flex: 200px 1 1;
  margin-left: 10px;
  margin-bottom: 10px;
}

<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

jsfiddle

简而言之，我可以使用上面的flex对元素进行以下定位：

enter image description here

尽管我无法使用网格布局实现相同的行为。 Flex布局允许项目在小屏幕上缩小，而网格布局则不允许。同时，我想保留这样的行为，即只有在这样放置之后，每个项目都不小于特定大小（在我们的例子中为200px）时，项目才会与另一个项目一起移动到下一行。 >

我正在使用网格布局，因为它可以保留所有子代的宽度相同的不变性。使用flex布局时，如果最后一个项目单独出现在行中，则会将其扩展到整行。

Answer 1

一种解决方案是依靠视口单元为子元素指定max-width，因为百分比值是相对于minmax()定义的轨道大小的，因此无法使用。这种解决方案不是通用的，您需要根据每种情况调整值。

例如，在您的情况下，我们可以使用100vw，因为容器是体内唯一的元素，并且占据了整个宽度：

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.child {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
  max-width:100vw;
  box-sizing:border-box; /* Don't forget this !*/
}

body {
  margin:0;
}

<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

如果有更多元素或某些填充/边距，则需要在max-width计算中考虑它们：

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.child {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
  max-width:calc(100vw - 40px); /*we remove the body margin*/
  box-sizing:border-box; 
}

body {
  margin:0 20px; 
}

<div class="container">
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
  <div class="child">
    text
  </div>
</div>

这就像我们不再有2个约束，而是3个：

网格单元的最小大小为200px
网格单元填充剩余空间
网格单元内的元素具有相对于屏幕尺寸定义的最大尺寸。 （我们缺少的收缩约束）

缩小网格项，就像CSS中的flex项一样

1 个答案: