How to Control Number of Items Per Row Using Media Queries in Flexbox

How to control number of items per row using media queries in Flexbox?

I had to get rid of the margin around the blocks, because percentage widths are difficult to cleanly apply to elements with margins, but you can see the changes at http://codepen.io/anon/pen/jPeLYb?editors=110 :

@mixin max-width($width) {
    @media screen and (max-width: $width) {
        @content;
    }
}

.container {
    position: relative;
    display: flex;
    flex-flow: row wrap;
}
.item {
    background-color: tomato;
    box-sizing: border-box;
    padding: 20px;
    outline: 2px solid blue;
    flex: 1;
}

@include max-width(992px) {
    .item {
        flex-basis: 25%;
        background-color: red;
    }
}

@include max-width(640px) {
    .item {
        flex-basis: 50%;
        background-color: green;
    }
}

The important parts here are:

flex-flow: row wrap which allows the flexbox to appear on multiple rows (the default is nowrap)
flex-basis which is the equivalent of width in this case
position: relative which makes the widths relative to the container, rather than the body (this would screw up the rounding)

Display different number of items per row

You can use flexbox and flex like below:

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.gallery > img {
  flex: calc(100%/3); /* 3 images per row */
  min-width: 0;
  outline:1px solid red;
}
/* until the 9th 4 images per row */
.gallery > :nth-child(-n + 9) {
  flex: calc(100%/4);
}
/* until the 5th 5 images per row */
.gallery > :nth-child(-n + 5) {
  flex: calc(100%/5);
}

<div class="gallery">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
</div>

Need a responsive solution for wrapping 3 list items per row

Use :after pseudo element to simulate an invisible child div so the alignment of the items is fixed to left. And media queries for the responsive. Check the snippet to get some idea.

.parent {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  gap: 20px;
  box-sizing: border-box;
  justify-content: space-between;
  background-color: lightgreen;
}

.parent::after {
  content: "";
  width: 30%;
  height: 0;
}

.child {
  flex-basis: 30%;
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width : 1024px) {
  /* for tablet */
  .parent::after {
    width: 46%;
  }
  .child {
    flex-basis: 46%;
  }
}

@media only screen and (max-width : 768px) {
  /* for mobile */
  .parent::after {
    display: none;
  }
  .child {
    flex-basis: 100%;
  }
}

<div class="parent">
  <div class="child"> <span>1</span> </div>
  <div class="child"> <span>2</span> </div>
  <div class="child"> <span>3</span> </div>
  <div class="child"> <span>4</span> </div>
  <div class="child"> <span>5</span> </div>
</div>

Force minimum items per row with Flexbox

May be you are looking for quantity queries, where you change the style depending on how many items there are on a list

a list apart article

.container {  display: flex;  flex-flow: row wrap;  border: solid 1px green;}.container > div {  flex: 1 0;  background-color: lightgreen;  height: 30px;  margin: 5px;}

.item:first-child:nth-last-child(3),.item:first-child:nth-last-child(3) ~ .item {  flex-basis: 30%;  }
.item:first-child:nth-last-child(4),.item:first-child:nth-last-child(4) ~ .item {  flex-basis: 40%;  }

<div class="container">  <div class="item"></div>  <div class="item"></div>  <div class="item"></div></div><div class="container">  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div></div>

How to Control Number of Items Per Row Using Media Queries in Flexbox