将弹性项目包装在最后一行 [英] 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网格可以 :

But CSS Grids can:

对于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)实现具有300像素框的包装网格.

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

为了使网格居中，我们使用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>

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