display flex limit items per row code example

Example 1: flexbox limit items per row

<style>
  .parent {
    display: flex;
    flex-wrap: wrap;
  }

  .child {
    /* percent per item in row. 
    33% = limit to 3 per row. */
    flex: 1 0 33%; 
    margin: 5px;
    height: 100px;
    background-color: blue;
  }
</style>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Example 2: flex max item per row

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

.child {
  flex: 2 0 21%; /* explanation below */
  margin: 5px;
  height: 100px;
  background-color: blue;
}