每行 3 个项目，带有弹性盒和间隙

Question

我想每排生 3 个孩子。当使用 inline-flex 和 grid （或边距/填充）时，flexbox 每行换行 2 个子项。似乎网格宽度已被考虑到每个子项的宽度中。在不改变 HTML 的情况下，有什么办法可以解决这个问题吗？我想保持10px每个孩子之间的间距相同，让父母在身体内水平居中，并将每个孩子的宽度保持为33.3333%.

我不只是将其更改为或类似的原因flex-basis: calc(33.3333% - 10px);是因为这不是一个精确的解决方案。父 div 边缘上的图像并不总是来自10px窗口的边缘。

提前致谢！

这是我的代码：

body {
  background-color: lightgreen;
  margin: 10px;
}

.parent {
  width: 100%;
  background-color: coral;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}

.child {
  flex-basis: 33.3333%;
}

<div class="parent">

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

</div>

Answer 1

使用 CSS-Grid 代替？

body {
  background-color: lightgreen;
  margin: 10px;
  text-align:center;
}

.parent {
  display: inline-grid;
  width:80%;
  background-color: coral;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.child img {
  width: 100%;
  min-width: 0;
}

<div class="parent">

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg" style="width: 0;max-width: 100%; min-width: 100%;">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg">
  </div>

  <div class="child">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg">
  </div>

</div>