Question 43977 in Html Question posted in
Some basic documentation can be found here.

How to make this flex item layout – Html

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

enter image description here

.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

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search