html – 包装最后一行中的flex项目

参见英文答案 > Targeting flex items on the last or specific row                                    3个
我有一个现在正确集中的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>

Flexbox无法解决这个问题：

所以问题是如果你使用你不想要的justify-content：center,你的最后一行会居中,如果你使用flex-start对齐,那么你的flexbox会在右边有一些空间.

全屏查看以下片段,以便连续获得两张图像并查看最后一张图像.

>给出对齐内容：中心,最后一个图像不对齐左边：

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

>给出合理的内容：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.请参阅以下演示,您的问题已解决 –

>使用网格模板列实现300px盒子的包装网格：重复(自动调整,300px).
>为了使网格居中,我们使用justify-content：center.
>使用网格间隙作为边距.

见下面的演示：

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