Необходимо разместить flex блоки, как на картинке

Question

<div class="popularCategory">
  <img class="firstCourse" src="img/middleItems/firstCourse.jpg" width="340px" height="210px">
  <img class="twoCourse" src="img/middleItems/twoCourse.jpg" width="340px" height="210px">           
  <img class="threeCourse" src="img/middleItems/threeCourse.jpg" width="340px" height="210px">
  <img class="fourCourse" src="img/middleItems/fourCourse.jpg" width="340px" height="210px">
  <img class="fiveCourse" src="img/middleItems/fiveCourse.jpg" width="440px" height="450px">
</div>

Помогите пожалуйста разместить flex элементы, как на скрине? Возможно ли это сделать без дополнительных дивов?

`

Answer 1

Без дополнительных дивов к сожалению никак

.popularCategory
    {display:flex;}
.blockone
    {display: flex;
    padding:5px;
    border-radius:10px;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;}
.blocktwo
   {display:flex;
   padding:5px;
    border-radius:10px;}
.blockthree
    {display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding:5px;
    border-radius:25px;
    }
    .firstCourse
    {
    padding:5px;
    border-radius:25px;
    }
     .twoCourse
    {
    padding:5px;
    border-radius:25px;
    }
    .threeCourse
     {
    padding:5px;
    border-radius:25px;
    }
    .fourCourse
     {
    padding:5px;
    border-radius:25px;
    }
    .fiveCourse
     {
    padding:5px;
    border-radius:25px;
    }

<div class="popularCategory">
  <div class="blockone"><img class="firstCourse" src="https://phonoteka.org/uploads/posts/2021-05/1620235226_18-phonoteka_org-p-krasivii-fon-s-mashinkami-22.jpg" width="340px" height="210px">
  <img class="twoCourse" src="https://sfw.so/uploads/posts/2009-08/1251303240_vector-cars-46.jpg" width="340px" height="210px">   </div>        
 <div class="blocktwo"> <img class="threeCourse" src="https://ovdi.ru/upload/iblock/f4c/f4c429b1234abb51e79b11a666a83551.jpg" width="440px" height="450px"></div>
  <div class="blockthree"> <img class="fourCourse" src="https://kartinkin.net/uploads/posts/2021-07/1625168892_15-kartinkin-com-p-krutoi-fon-s-mashinoi-krasivie-foni-15.jpg" width="340px" height="210px">
 <img class="fiveCourse" src="https://image.winudf.com/v2/image1/Y29tLkNhckxpdmVXYWxscGFwZXJubl9zY3JlZW5fNV8xNTY2OTk4NTc5XzA2Nw/screen-5.jpg?fakeurl=1&type=.jpg" width="340px" height="210px"></div>
</div>

БЛОГ НА HUSL

Необходимо разместить flex блоки, как на картинке

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