html - 使用 flexbox 将图像排成一行

Question

我想将一堆图像彼此相邻放置(连续 4 张)，将第 5 张放在下一行...

图像宽度应为行的 1/4。

我正在尝试使用 flex-boxes 找到解决方案，但没有任何线索......

<h2>Students</h2>
<div class="content">
  <img class="student" src="http://placehold.it/400x400">
  <img class="student" src="http://placehold.it/400x400">
  <img class="student" src="http://placehold.it/400x400">
  <img class="student" src="http://placehold.it/400x400">
  <img class="student" src="http://placehold.it/400x400">
  <img class="student" src="http://placehold.it/400x400">
  <img class="student" src="http://placehold.it/400x400">
</div>

Answer 1

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.content > div {
  width: 25%;
  padding: 0 10px 10px 0;
  box-sizing: border-box;
}

.content > div  img {
  width: 100%;
}

<h2>Students</h2>
<div class="content">
  <div><img class="student" src="http://placehold.it/400x400"></div>
  <div><img class="student" src="http://placehold.it/400x400"></div>
  <div><img class="student" src="http://placehold.it/400x400"></div>
  <div><img class="student" src="http://placehold.it/400x400"></div>
  <div><img class="student" src="http://placehold.it/400x400"></div>
</div>

这就是你想要的？