Spacing between flexbox items

Question

This is what I want:

The closest I\'ve got. Applying margin on flexbox items, then re

Answer 1

While Rejoy answer works perfectly, it's not responsive-ready, because the rows are locked.

flex-flow is your new friend. However, flex is not without bugs. The negative margin trick we know from various grid framework does work, unless you are on IE, where the elements get wrapped too early because it uses content-box as box-size. But there is an easy workaround.

Working example: https://jsfiddle.net/ys7w1786/

.flex {
  display: flex;  
  flex-direction: row; /* let the content flow to the next row */
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: -4px -4px; /* grid trick, has to match box margin */
}

The boxes come with flex-basis: auto, because of IE. But we can simply use width instead:

.box {
    flex: 0 0 auto; /* auto is important because of an IE bug with box-size */
    height: 100px;
    display: inline-block;
    background-color: black;
    margin: 4px; /* spacing between boxes, matches parent element */
}

.s1-2{
  width: calc(50% - 8px); 
}
.s1-4{
  width: calc(25% - 8px);
}