Help with flexbox

Question

I’m struggling to do this with flexbox. With float was very easy as it organizes easily.

.slider > div > img {
  width: 100%;
  height: 100%;
}

.slider > div.item-1 {
  width: 60%;
  height: 500px;
  float: left;
}

.slider > div.item-2 {
  width: 40%;
  height: 300px;
  float: left;
}

.slider > div.item-3 {
  width: 40%;
  height: 200px;
  float: left;
} 

<div class="slider">
    <div class="item-1">
        <img src="https://www.dominios.pt/wp-content/uploads/domain-site.png" alt="Img 1">
    </div>
    <div class="item-2">
        <img src="https://www.dominios.pt/wp-content/uploads/domain-site.png" alt="Img 1">
    </div>
    <div class="item-3">
        <img src="https://www.dominios.pt/wp-content/uploads/domain-site.png" alt="Img 1">
    </div>
</div>

Answer 1

I’ll leave one option without having to encapsulate the right images in one div new. That way you can continue using the direct selector > and all the divs with image are at the same level.

So in this option all images are brother, and you can use the property order of flex freely to reorganize the brothers if you like. Just remember that it is not only the order that you need to change, has other properties that you need to change when image 3 for example goes to the place of image 1.

OBS: I didn’t touch anything in HTML, all the adjustments were in CSS, so the div continue sisters direct etc.

The main thing here is to use the flex-column, so the "grid" aligns in columns, the first column is occupied by the larger image that is 60% of the width, and 100% of the height, so the next two images of 40% width and 300px / 200px height are in the remaining space on the right.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}

.slider > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #000;
}

.slider {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  height: 500px;
}
.slider > .item-1 {
  width: 60%;
  height: 500px;
}
.slider > .item-2,
.slider > .item-3 {
  width: 40%;
  height: 300px;
}
.slider > .item-3 {
  height: 200px;
}

<div class="slider">
  <div class="item-1">
      <img src="https://www.dominios.pt/wp-content/uploads/domain-site.png" alt="Img 1">
  </div>
  <div class="item-2">
      <img src="https://www.dominios.pt/wp-content/uploads/domain-site.png" alt="Img 1">
  </div>
  <div class="item-3">
      <img src="https://www.dominios.pt/wp-content/uploads/domain-site.png" alt="Img 1">
  </div>
</div>

Answer 2

You could include Divs 2 and 3 in another container div, creating a second column. You also need to adjust some styles in CSS by removing the sign > and changing the width of Divs 2 and 3 to 100%, since they will be in a container with the 40% wide:

.slider{
   display: flex;
}

.slider > div img {
  width: 100%;
  height: 100%;
}

.slider > div.item-1 {
  width: 60%;
  height: 500px;
}

.slider div.item-2 {
  width: 100%;
  height: 300px;
}

.slider div.item-3 {
  width: 100%;
  height: 200px;
} 

.slider > div.item2-3 {
  width: 40%;
  height: 100%;
} 

<div class="slider">
    <div class="item-1">
        <img src="https://www.dominios.pt/wp-content/uploads/domain-site.png" alt="Img 1">
    </div>
    <div class="item2-3">
       <div class="item-2">
           <img src="https://www.dominios.pt/wp-content/uploads/domain-site.png" alt="Img 1">
       </div>
       <div class="item-3">
           <img src="https://www.dominios.pt/wp-content/uploads/domain-site.png" alt="Img 1">
       </div>
   </div>
</div>