How to make this flex item layout

Question

How to make this flex item layout in html/css?

.container
{
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
    flex-wrap: wrap-reverse;
    gap: 3%;
}

<div class="container">
      <div class="item">
        <img src="img/1.png"></img>
      </div>
      <div class="item">
        <img src="img/2.png"></img>
      </div>
      <div class="item">
        <img src="img/3.png"></img>
      </div>
</div>

I used the following code to create this tile layout, but I get this similar output: sample

if you find an answer add it as answer not inside the question — Temani Afif, Mar 15 '23 at 19:47

score 0 · Answer 1 · answered Mar 15 '23 at 17:12

In this layout, we have the first item which is taken at the full height of the container on the left side, and we need the other two elements to occupy the space on the right side between them.

One approach that we can take is to give a fixed height to the container and the first item's height will be the full height of the container. The other two elements (item2, item3) will go to the right side if we set flex-wrap:Wrap and flex-direction: column. and here is a Codepen for what I am saying Link

<div class="container">
  <div class="item item1">item 1</div>
  <div class="item item2">item 2</div>
  <div class="item item3">item 3</div>
</div>

.container{
  display:flex;
  height:400px;
  flex-direction:column;
  flex-wrap:wrap
}

.item{
  padding:2rem;
  margin:20px;
}

.item1{
  background-color:#146C94;
  height:100%;
}

.item2{
  height:50px;
  background-color:#19A7CE;
}

.item3{
  height:100px;
  background-color:#F6F1F1;
}

score 0 · Answer 2 · answered Mar 15 '23 at 17:13

This is what you want.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  height: 500px;
  padding: 20px;
}

.box1,
.box2 {
  flex-basis: calc(50% - 10px);
  height: 100%;
}

.box2 {
  display: flex;
  flex-direction: column;
}

.box2-row1 {
  background-color: #40e0d0;
  height: 50%;
}

.box2-row2 {
  background-color: #6495ed;
  height: 50%;
  order: 1;
}

.box1 {
  background-color: #ff7f50;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2">
    <div class="box2-row1"></div>
    <div class="box2-row2"></div>
  </div>
</div>

How to make this flex item layout

2 Answers2