Как с помощью flexbox расположить в ряд по 2-4 картинки?

Question

Я прописал flex-wrap: wrap; и первая линия нормально выстраивается, а остальные на друг друга. Как можно решить только с помощью флексов и без гридов? Код ниже! Вот ссылка на картинки + скрин проблемы и скрин как нужно P.S. То что я добавил для блоков с картинками 25% наверн это я лишнее сделал...

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

.content_img {
    width: 25%;
}
/*More Images
============================================*/
#more_img {
    display: none;
}

<div class="portfolio">
<div class="content">
        <div class="content_img" id="hide_img">
            <img src="img/content/room-1.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-2.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-3.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-4.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-5.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-6.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-7.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-8.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-9.jpg" alt="Images">
        </div>
        <div class="content_img" id="hide_img">
            <img src="img/content/room-10.jpg" alt="Images">
        </div>
<!------------------More Images------------------>
        <div class="content_img" id="more_img">
            <img src="" alt="Images">
        </div>
        <div class="content_img" id="more_img">
            <img src="" alt="Images">
        </div>
        <div class="content_img" id="more_img">
            <img src="" alt="Images">
        </div>
        <div class="content_img" id="more_img">
            <img src="" alt="Images">
        </div>
        <div class="content_img" id="more_img">
            <img src="" alt="Images">
        </div>
    </div>
</div>

Answer 1

Расположение картинок я бы сделал при помощи Grid Layout, с использованием свойства grid-areas-template.
Вот пример:

.content {
  display: grid;
  grid-template-areas: 
    'i1 i2 i3 i4'
    'i1 i5 i7 i7'
    'i6 i6 i7 i7';
  grid-gap: 1vw;
  width: 100%;
}

.content > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content > img:nth-child(1) {grid-area: i1;}
.content > img:nth-child(2) {grid-area: i2;}
.content > img:nth-child(3) {grid-area: i3;}
.content > img:nth-child(4) {grid-area: i4;}
.content > img:nth-child(5) {grid-area: i5;}
.content > img:nth-child(6) {grid-area: i6;}
.content > img:nth-child(7) {grid-area: i7;}

<div class="content">
  <img src="//i.imgur.com/D5R3yy0.jpeg" alt="i1">
  <img src="//i.imgur.com/kpLFvWB.jpeg" alt="i2">
  <img src="//i.imgur.com/khH2fsO.jpeg" alt="i3">
  <img src="//i.imgur.com/eYh9SMC.jpeg" alt="i4">
  <img src="//i.imgur.com/Zzp1Gz2.jpeg" alt="i5">
  <img src="//i.imgur.com/0qUm2zy.jpeg" alt="i6">
  <img src="//i.imgur.com/S0J5wNr.jpeg" alt="i7">
</div>

Answer 2

Сделать такое с помощью флексов не получится, если один контейнер.

Но можно сделать несколько контейнеров. Вот пример. Расстояние между елементами 1рем, то есть 20 пикселей. (хотя я бы остановился на grid, это удобнее, чем писать громоздкий код, как ниже.)

html{
  font-size:20px;/*1 rem*/
}
.o1{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.o2{
  width:calc(50% - 0.5rem);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.o3{
  width:calc(50% - 0.5rem);
  display:flex;
  height:6rem;
  margin-bottom:1rem;
  background:linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); 
}
.o4{
  width:100%;
  display:flex;
  height:6rem;
  margin-bottom:1rem;
  background:linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); 
}
.o5{
  width:100%;
  display:flex;
  height:13rem;
  margin-bottom:1rem;
  background:linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); 
}
.o6{
  width:calc(50% - 0.5rem);
  display:flex;
  height:13rem;
  margin-bottom:1rem;
  background:linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%); 
}
.o7{
  width:calc(50% - 0.5rem);
  display:flex;
  flex-wrap:wrap;
}

<div class="o1">
  
  <div class="o2">
    
    <div class="o6">
    </div>
    <div class="o7">
      <div class="o4">
      </div>
      <div class="o4">
      </div>
    </div>
    <div class="o4">
    </div>
    <div class="o3">
    </div>
    <div class="o3">
    </div>
    
  </div>
  
  <div class="o2">
    
    <div class="o3">
    </div>
    <div class="o3">
    </div>
    <div class="o5">
    </div>
    <div class="o4">
    </div>
    
  </div>
  
</div>

БЛОГ НА HUSL

Как с помощью flexbox расположить в ряд по 2-4 картинки?

Ответы (2 шт):