Question

我有一个img-gallery，现在可以正确进行集中。问题是，当图像换行到新行时，它也与中心对齐。换行后，图像应与上一行中的第一张图像垂直对齐。

.gallery-links {justify-content: flex-start;}

这几乎解决了。但是，在图像换行之后，整个img-gallery并未集中。参见fiddle和摘要：

.gallery-links {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.gallery-img {
  flex-basis: 300px;
  margin: 10px;
}

.gallery-img img {
  width: 100%;
}

<section class="gallery-links">
  <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img1">
  <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img2">
  <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img3">
  <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img4">
</section>

Answer 1

Flexbox 不能解决此问题：

所以问题在于，如果您使用不需要的justify-content: center，并且如果使用flex-start对齐，那么您的最后一行将以居中 {1}}在右侧会有一些空间。

全屏查看下面的代码片段，这样您就可以连续获取两张图像并查看最后一张图像。

给定flexbox，最后一张图像未向左对齐：

justify-content: center

.gallery-links {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid;
}

.gallery-img {
  flex-basis: 300px;
  margin: 10px;
}

.gallery-img img {
  width: 100%;
}

给<section class="gallery-links"> <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img1"> <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img2"> <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img3"> <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img4"> <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img1"> </section>的情况是，整个flexbox都朝左侧偏移：
```
justify-content: flex-start
```
```
.gallery-links {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid;
}

.gallery-img {
  flex-basis: 300px;
  margin: 10px;
}

.gallery-img img {
  width: 100%;
}
```

这是<section class="gallery-links"> <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img1"> <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img2"> <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img3"> <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img4"> <img class="gallery-img" src="https://www.w3schools.com/howto/img_forest.jpg" alt="img1"> </section>的局限性，因为它只是一维布局解决方案。

但是CSS网格可以 ：

对于2D解决方案，首选CSS Grid。参见下面的演示，您的问题已得到解决-

使用flexbox实现具有300像素框的包装网格。
为了使网格居中，我们使用grid-template-columns: repeat( auto-fit, 300px)。
使用justify-content: center表示边距。

请参见下面的演示

grid-gap

.gallery-links {
  display: grid;
  grid-template-columns: repeat( auto-fit, 300px);
  justify-content: center;
  grid-gap: 10px;
  border: 1px solid;
}

.gallery-img {
  width: 100%;
}

将弹性项目包装在最后一行

1 个答案: