How to make flexbox grid images responsive

Question

I am trying to create a flexbox grid with images that have different widths and heights which i want to behave responsive when shown on different screen sizes. I have the grid now, but i do not know how to make it responsive. I have tried to apply responsive classes within bootstrap to the current layout but without any luck. I have also tried masonry, but it did not solve my problem.

So the question is, how do i make this responsive and is it even the right approach?

HTML

<div class="flex_container">
  <div class="flex_group__1">
    <img src="holder.js/460x670" />
    <img src="holder.js/460x408" />
  </div>
  <div class="flex_group__2">
    <img src="holder.js/645x813">
    <img src="holder.js/645x265">
  </div>
  <div class="flex_group__3">
    <img src="holder.js/808x330"/>
    <div class="flex_group__3_inner_bottom">
      <img src="holder.js/452x748"/>
      <img src="holder.js/356x748"/>
    </div>
  </div>
</div>

CSS

.flex_group__1, .flex_group__2, .flex_group__3, .flex_group__3_inner_bottom, .flex_container {
  display: flex;
}

.flex_container {
  flex-direction: row;
}

.flex_group__3 {
  flex-direction: row wrap;
  justify-content: flex-end;
}

.flex_group__1, .flex_group__2, .flex_group__3 {
  flex-direction: column;
}

.flex_container * {
  border: 1px solid;
}
img {
  max-width: 100%;
}

Answer 1

Here is a version with a layout closer to the one you asked for, and easier to follow.

With this you either set background-image (as I did in below stack snippet) on each image holder, or add an img element to the markup.

Fiddle demo

html, body {
  margin: 0;
}
.wrapper {
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;   /* 16:9 ratio */
  display: block;
  content: ' ';
}
.flex-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 5px;
  display: flex;
}
.flex-container > div {           /*  .flex-col-1, .flex-col-2, .flex-col-3  */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.flex-container > div > div {     /*  .flex-row-1, .flex-row-2    */
  margin: 5px;
  display: flex;
}

.flex-col-1 {
  width: 25%;
}
  .flex-col-1 .flex-row-1 {
    height: 70%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }
  .flex-col-1 .flex-row-2 {
    height: 30%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }

.flex-col-2 {
  width: 32.5%;
}
  .flex-col-2 .flex-row-1 {
    height: 80%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }
  .flex-col-2 .flex-row-2 {
    height: 20%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }

.flex-col-3 {
  width: 42.5%;
}
  .flex-col-3 .flex-row-1 {
    height: 44%;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }
  .flex-col-3 .flex-row-2 {
    height: 56%;
  }

.flex-col-3-inner {
  flex: 1;
  display: flex;
}
  .flex-col-3-inner .flex-col-1-inner {
    width: 40%;
    margin-right: 5px;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }
  .flex-col-3-inner .flex-col-2-inner {
    width: 60%;
    margin-left: 5px;
    background: #ddd url(https://placeimg.com/400/600/arch) no-repeat center;
    background-size: cover;
  }

<div class="wrapper">
  <div class="flex-container">
    <div class="flex-col-1">
      <div class="flex-row-1">
      </div>
      <div class="flex-row-2">
      </div>
    </div>
    <div class="flex-col-2">
      <div class="flex-row-1">
      </div>
      <div class="flex-row-2">
      </div>
    </div>
    <div class="flex-col-3">
      <div class="flex-row-1">
      </div>
      <div class="flex-row-2">
        <div class="flex-col-3-inner">
          <div class="flex-col-1-inner">
          </div>
          <div class="flex-col-2-inner">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

---

2:nd sample, using img, where I also added this rule

.flex-container img {
  height: auto;
  width: 100%;
}

and as you can see, with a layout like this, img elements need more individual touch to make them behave.

html, body {
  margin: 0;
}
.wrapper {
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%;   /* 16:9 ratio */
  display: block;
  content: ' ';
}
.flex-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 5px;
  display: flex;
}
.flex-container > div {           /*  .flex-col-1, .flex-col-2, .flex-col-3  */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.flex-container > div > div {     /*  .flex-row-1, .flex-row-2    */
  margin: 5px;
  display: flex;
}

.flex-container img {
  height: auto;
  width: 100%;
}

.flex-col-1 {
  width: 25%;
}
  .flex-col-1 .flex-row-1 {
    height: 70%;
    background: #ddd;
  }
  .flex-col-1 .flex-row-2 {
    height: 30%;
    background: #ddd;
  }

.flex-col-2 {
  width: 32.5%;
}
  .flex-col-2 .flex-row-1 {
    height: 80%;
    background: #ddd;
  }
  .flex-col-2 .flex-row-2 {
    height: 20%;
    background: #ddd;
  }

.flex-col-3 {
  width: 42.5%;
}
  .flex-col-3 .flex-row-1 {
    height: 44%;
    background: #ddd;
  }
  .flex-col-3 .flex-row-2 {
    height: 56%;
  }

.flex-col-3-inner {
  flex: 1;
  display: flex;
}
  .flex-col-3-inner .flex-col-1-inner {
    width: 40%;
    margin-right: 5px;
    background: #ddd;
  }
  .flex-col-3-inner .flex-col-2-inner {
    width: 60%;
    margin-left: 5px;
    background: #ddd;
  }

<div class="wrapper">
  <div class="flex-container">
    <div class="flex-col-1">
      <div class="flex-row-1">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
      <div class="flex-row-2">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
    </div>
    <div class="flex-col-2">
      <div class="flex-row-1">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
      <div class="flex-row-2">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
    </div>
    <div class="flex-col-3">
      <div class="flex-row-1">
        <img src="https://placeimg.com/400/600/arch" alt="">
      </div>
      <div class="flex-row-2">
        <div class="flex-col-3-inner">
          <div class="flex-col-1-inner">
            <img src="https://placeimg.com/400/600/arch" alt="">
          </div>
          <div class="flex-col-2-inner">
            <img src="https://placeimg.com/400/600/arch" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Here are 2 more variants, one using background-size: contain;

• https://jsfiddle.net/LGSon/htjccmfg/1

and the other background-size: 100% 100%

• https://jsfiddle.net/LGSon/htjccmfg/2