Vou deixar uma opção sem precisar encapsular as imagens da direita em um div
nova. Desse forma vc pode continuar usando o seletor direto >
e todas as divs
com imagem estão no mesmo nível.
Então nessa opção todas as imagens são irmão, e vc pode usar a propriedade order
do flex
livremente para reorganizar os irmão caso queira. Só lembre que não é só o order
que vc precisa mudar, tem outras propriedades que vc precisa mudar quando a imagem 3 por exemplo for para o lugar da imagem 1.
OBS: Não mexi em NADA no HTML, todos os ajustes foram no CSS, assim as div
continuai irmãs diretas etc.
O principal aqui é usar o flex-column
, assim o "grid" se alinha em colunas, a primeira coluna é ocupada pela imagem maior que tem 60% da largura, e 100% da altura, assim as próximas duas imagens de 40% de largura e 300px / 200px de altura ficam no espaço restante a direita.
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>
order
caso queira, pois eu mantive seu HTML intácto só mexi no CSS e todas asdiv
continuam irmãs agora.