在最后一行包装弹性项目[重复]

Question

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

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

这使它几乎解决了。但是在图像换行之后，整个img-gallery 并没有集中。见fiddle和sn-p：

.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 对齐，那么您的最后一行将 居中，那么您的 flexbox 将有右侧的一些空间。

以全屏方式查看下面的 sn-ps，这样您就可以连续获得两张图像并查看最后一张图像。

1. 给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>

2. 给出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>

这是flexbox 的限制，因为它只是一维布局解决方案。

---

但 CSS 网格可以：

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

1. 使用grid-template-columns: repeat( auto-fit, 300px) 实现具有300px 框的环绕网格。

2. 为了使网格居中，我们使用justify-content: center。

3. 使用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%;
}

<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">
  <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">
</section>