CSS3 flexbox layout max 3 child items on one line

Question

Is their an simple way in CSS to have a fixed maximum of child items on the same line, before you push the next child elements to a new line?

Answer 1

fiddle

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#container>div {
  margin: 15px;
  width: 150px;
  height: 150px;
}

/* negative paddings are treated as 0 so woohoo */
#container>div {
  /* up to 3 boxes in a row */
  padding: 0 calc((100% - 180px * 3) / 6);
}
#container>div {
  /* up to 4 boxes in a row */
  //padding: 0 calc((100% - 180px * 4) / 8);
}
#container>div {
  /* up to 5 boxes in a row */
  //padding: 0 calc((100% - 180px * 5) / 10);
}
/* 180px = width + horizontal margins */