css - 像 CSS 中的 flex 元素一样收缩网格元素

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

flex 元素

.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 对元素进行以下定位:

虽然我无法通过使用网格布局实现相同的行为。 Flex 布局允许元素在小屏幕上缩小，而网格布局则不允许。同时，我想保留这样的行为，即只有在放置后每个元素都不会短于特定尺寸(在我们的例子中为 200px)时，该元素才会与另一个元素一起移动到下一行。

我正在使用网格布局，因为它允许保留所有子项的宽度都相同的不变性。使用 flex 布局，如果最后一个元素单独在一行中，它将被拉伸(stretch)到整行。

Answer 1

新方案

初始解决方案的优化版本使用 min()

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(200px,100%), 1fr));
}

.child {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 3px solid #a07;
}

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到依赖于视口(viewport)单位的子元素，因为百分比值是相对于 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
• 网格单元填充剩余空间
• 网格单元内的元素具有相对于屏幕尺寸定义的最大尺寸。 (我们缺少的收缩约束)