每行 3 个项目，带有 flexbox 和间隙 [重复]

Question

我希望每行有 3 个孩子。当使用 inline-flex 和 grid（或 margin/padding）时，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>