Displaying a specific number of item on a row and making them scroll-able when the screen size reduces - Flexbox

Question

I am new to flex box, I want my images to be able to display four Images on a row which becomes scroll-able when the screen size reduces, how do i achieve that?

div {
  display: flex;
  justify-content: space-around;
}

img {
  max-width: 100%
}

<div>
  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
  
  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
  
  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
</div>

Does this answer your question? [Flexbox: 4 items per row](https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row) — Laif, Dec 10 '19 at 16:21
Not totally, i need to make this images scroll-able when the screen size is smaller — Ojay, Dec 10 '19 at 16:27
When you say scrollable what are you talking about? like, left to right? The answer to the referenced question is "scrollable." It isn't just cutting it off. — Laif, Dec 10 '19 at 16:27
If you are wanting four to a row, why not give them an width of 25%. Then give your container a min-width so it will stay that big and scroll when your screen size is too small — Pete, Dec 10 '19 at 16:35
maybe,overflow is missing on the div and , min-width to only show 4 image at the time, and also margin for img instead justify-content ? — G-Cyrillus, Dec 10 '19 at 17:46

score 1 · Answer 1 · answered Dec 10 '19 at 17:57

Instead of flexbox, use grid, and give the container a fixed min-width:

div {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  justify-content: space-around;
  grid-gap:10px;
  max-width:500px;
  min-width:450px;
}

<div>
  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
</div>

Is it possible to make a single row scrollable? – Ojay Dec 11 '19 at 05:28 — Ojay, Dec 11 '19 at 05:28

score 0 · Answer 2 · answered Dec 10 '19 at 17:49

from my comment trying to figure out your question

-maybe,overflow is missing on the div and , min-width to only show 4 image at the time, and also margin for img instead justify-content ?-

div {
  display:flex;
  overflow:auto;
}

img {
min-width:20%;
margin: 0 2.5%;
height:auto;
}

<div>
  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">

  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
  
  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
  
  <img height="50" width="50" src="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg" alt="">
</div>

Displaying a specific number of item on a row and making them scroll-able when the screen size reduces - Flexbox

2 Answers2