如何用图像链接更改每行的flex项目数？

Question

我想更改一行中的flex项目数，但在本例中，flex项是图像链接。因此，我在锚标记中嵌套了<img>标记。

下面是我的项目的HTML和CSS：

​

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 10px;
}

input[type="search"] {
  height: 40px;
  width: 80%;
  margin: 30px auto;
  border: 1px red solid;
}

.images-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  border: 1px red solid;
}

a {
  flex: 25%;
  border: 1px red solid;
}

<div class=container>

  <div class="images-container">
    <a href="https://picsum.photos/id/1/150/150" data-lightbox="image-1"><img src="https://picsum.photos/id/1/150/150" alt="Image 1"></a>
    <a href="https://picsum.photos/id/2/150/150" data-lightbox="image-2"><img src="https://picsum.photos/id/2/150/150" alt="Image 2"></a>
    <a href="https://picsum.photos/id/3/150/150" data-lightbox="image-3"><img src="https://picsum.photos/id/3/150/150" alt="Image 3"></a>
    <a href="https://picsum.photos/id/4/150/150" data-lightbox="image-4"><img src="https://picsum.photos/id/4/150/150" alt="Image 4"></a>
    <a href="https://picsum.photos/id/5/150/150" data-lightbox="image-5"><img src="https://picsum.photos/id/5/150/150" alt="Image 5"></a>
    <a href="https://picsum.photos/id/6/150/150" data-lightbox="image-6"><img src="https://picsum.photos/id/6/150/150" alt="Image 6"></a>
    <a href="https://picsum.photos/id/7/150/150" data-lightbox="image-7"><img src="https://picsum.photos/id/7/150/150" alt="Image 7"></a>
    <a href="https://picsum.photos/id/8/150/150" data-lightbox="image-8"><img src="https://picsum.photos/id/8/150/150" alt="Image 8"></a>
    <a href="https://picsum.photos/id/9/150/150" data-lightbox="image-9"><img src="https://picsum.photos/id/9/150/150" alt="Image 9"></a>
    <a href="https://picsum.photos/id/10/150/150" data-lightbox="image-10"><img src="https://picsum.photos/id/10/150/150" alt="Image 10"></a>
    <a href="https://picsum.photos/id/11/150/150" data-lightbox="image-11"><img src="https://picsum.photos/id/12/150/150" alt="Image 11"></a>
    <a href="https://picsum.photos/id/12/150/150" data-lightbox="image-12"><img src="https://picsum.photos/id/12/150/150" alt="Image 12"></a>
  </div>

</div>

​

这是我想要的模型：https://ibb.co/pZM4KdC

因此，正如您在我的代码中所看到的:锚标记中的<img>不会占用全部空间。现在，我将锚标记的显示设置为阻止，然后将图像的width设置为100%，从而修复了这一问题，但这在我的网页上产生了垂直滚动。

我希望消除anchor 容器右侧的额外空间，这最终会在项之间添加额外的间距。

有什么可能的解决办法吗？

Answer 1

将以下css添加到代码中：

.images-container img {
  width: 100%;
}

.images-container>a {
  flex: calc(100% / 3);
}

您可以通过在flex中更改.images-container>a属性来调整每行图像的数量。

下面是新添加的css的工作片段。

​

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 10px;
}

input[type="search"] {
  height: 40px;
  width: 80%;
  margin: 30px auto;
  border: 1px red solid;
}

.images-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  border: 1px red solid;
}

a {
  flex: 25%;
  border: 1px red solid;
}

.images-container img {
  width: 100%;
}

.images-container>a {
  flex: calc(100% / 3);
}

<div class=container>

  <div class="images-container">
    <a href="https://picsum.photos/id/1/150/150" data-lightbox="image-1"><img src="https://picsum.photos/id/1/150/150" alt="Image 1"></a>
    <a href="https://picsum.photos/id/2/150/150" data-lightbox="image-2"><img src="https://picsum.photos/id/2/150/150" alt="Image 2"></a>
    <a href="https://picsum.photos/id/3/150/150" data-lightbox="image-3"><img src="https://picsum.photos/id/3/150/150" alt="Image 3"></a>
    <a href="https://picsum.photos/id/4/150/150" data-lightbox="image-4"><img src="https://picsum.photos/id/4/150/150" alt="Image 4"></a>
    <a href="https://picsum.photos/id/5/150/150" data-lightbox="image-5"><img src="https://picsum.photos/id/5/150/150" alt="Image 5"></a>
    <a href="https://picsum.photos/id/6/150/150" data-lightbox="image-6"><img src="https://picsum.photos/id/6/150/150" alt="Image 6"></a>
    <a href="https://picsum.photos/id/7/150/150" data-lightbox="image-7"><img src="https://picsum.photos/id/7/150/150" alt="Image 7"></a>
    <a href="https://picsum.photos/id/8/150/150" data-lightbox="image-8"><img src="https://picsum.photos/id/8/150/150" alt="Image 8"></a>
    <a href="https://picsum.photos/id/9/150/150" data-lightbox="image-9"><img src="https://picsum.photos/id/9/150/150" alt="Image 9"></a>
    <a href="https://picsum.photos/id/10/150/150" data-lightbox="image-10"><img src="https://picsum.photos/id/10/150/150" alt="Image 10"></a>
    <a href="https://picsum.photos/id/11/150/150" data-lightbox="image-11"><img src="https://picsum.photos/id/12/150/150" alt="Image 11"></a>
    <a href="https://picsum.photos/id/12/150/150" data-lightbox="image-12"><img src="https://picsum.photos/id/12/150/150" alt="Image 12"></a>
  </div>

</div>

​

Answer 2

我认为您要寻找的是CSS网格：

​

* {
  box-sizing: border-box;
}

input[type="search"] {
  height: 40px;
  width: 80%;
  margin: 30px auto;
  border: 1px red solid;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px red solid;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<div class="grid-container">
   <div class="grid-item">
    <a href="https://picsum.photos/id/1/150/150" data-lightbox="image-1"><img src="https://picsum.photos/id/1/150/150" alt="Image 1"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/2/150/150" data-lightbox="image-2"><img src="https://picsum.photos/id/2/150/150" alt="Image 2"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/3/150/150" data-lightbox="image-3"><img src="https://picsum.photos/id/3/150/150" alt="Image 3"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/4/150/150" data-lightbox="image-4"><img src="https://picsum.photos/id/4/150/150" alt="Image 4"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/5/150/150" data-lightbox="image-5"><img src="https://picsum.photos/id/5/150/150" alt="Image 5"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/6/150/150" data-lightbox="image-6"><img src="https://picsum.photos/id/6/150/150" alt="Image 6"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/7/150/150" data-lightbox="image-7"><img src="https://picsum.photos/id/7/150/150" alt="Image 7"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/8/150/150" data-lightbox="image-8"><img src="https://picsum.photos/id/8/150/150" alt="Image 8"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/9/150/150" data-lightbox="image-9"><img src="https://picsum.photos/id/9/150/150" alt="Image 9"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/10/150/150" data-lightbox="image-10"><img src="https://picsum.photos/id/10/150/150" alt="Image 10"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/11/150/150" data-lightbox="image-11"><img src="https://picsum.photos/id/12/150/150" alt="Image 11"></a>
	</div>
	 <div class="grid-item">
    <a href="https://picsum.photos/id/12/150/150" data-lightbox="image-12"><img src="https://picsum.photos/id/12/150/150" alt="Image 12"></a>
	</div>
  </div>

​

源：grid.asp，您可以相应地更改填充以更改图像之间的距离。