在最后一行包装 flex 项目 [英] Wrapping flex items in the last row

问题描述

我有一个 img-gallery 现在正确地集中了.问题是当图像换行到新行时，它也与中心对齐.换行后，图片应与前一行的第一张图片垂直排列.

I have an img-gallery which is centralizing now correctly. Problem is that when the image wraps to new line it is also aligning to the center. After wrapping, the image should be vertically lined with the first image in the previous row.

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

这就基本解决了.但是图片包裹后，整个img-gallery就没有中心化了.请参阅 fiddle 和片段:

This makes it almost solved. But after the image wraps, the whole img-gallery is not centralized. See fiddle and snippet:

.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 无法解决这个问题:

Flexbox can't solve this:

所以问题是，如果你使用 justify-content: center 你不想要的，并且如果你使用 ，你的最后一行将 居中flex-start 对齐，那么你的 flexbox 将在右侧有一些空间.

So the issue is that your last row would be centered if you use justify-content: center which you don't want, and if you use flex-start alignment, then your flexbox will have some space at the right side.

以全屏方式查看以下片段，以便您连续获得两张图片并查看最后一张图片.

View the below snippets in full screen such that you get two images in a row and take a look at the last image.

1. 给justify-content: center，最后一张图片没有左对齐:

1. Giving justify-content: center, the last image is not aligned to the left:

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

给 justify-content: flex-start 有一个 flexbox 整体向左侧错位:

Giving justify-content: flex-start there is a misalignment of the flexbox as a whole towards the left side:

.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 的一个限制，因为它只是一个一维布局解决方案.

This is a limitation of flexbox as it is only a one-dimensional layout solution.

但是 CSS 网格可以:

对于 2D 解决方案，首选 CSS 网格.请参阅下面的演示，您的问题已得到解决-

For a 2D solution, CSS Grid is preferred. See below demo where your issue has been solved-

1. 使用grid-template-columns:repeat(auto-fit, 300px)实现一个带有300px盒子的包裹网格.

1. A wrapping grid with 300px boxes is achieved using grid-template-columns: repeat( auto-fit, 300px).

为了使 grid 居中，我们使用 justify-content: center.

For centering the grid we use 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%;
}

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

这篇关于在最后一行包装 flex 项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！