Q:

CSS / Flexboxes: Positioning Images In A Row

I'd like to position a bunch of images next to each other (4 in a row), putting the 5th in the next line...
the image-width should be 1/4 of the row.
I'm trying to find a solution to that with flex-boxes, but no clue...

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

A:

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

this is what you wanted?

