CODEWITHSUNDEEP
htmlcssflexbox
Timo
Timo

Reputation: 261

Positioning images in a row with flexbox

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>

Upvotes: 0

Views: 4538

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105903

You can set a static width and eventually a margin , all together, it should not exceed 25% if you want 4 in a row, 33.33% for three in a row and so on .

.content {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start; /* else image aare stretching in Chrome */
  }
.student {
  margin:1vw 1%;
  width:23%;/* 23% + 1% margin-left + 1% margin-right = 25% */
  }
<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>

edit obviously, chrome is having issues if align-items:flex-start; is not set,

... makes me think that float is cross browsers for this simple kind of layout:

.content {
  overflow:hidden;
  }
.student {
  float:left;
  margin: 1%;
  width:23%;/* 23% + 1% margin-left + 1% margin-right = 25% */
  }
<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>

Just saying :)

Upvotes: 1

Kasia
Kasia

Reputation: 1725

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

Upvotes: 1

Related Questions