5

Estou com dificuldades para fazer isso com flexbox. Com float foi muito fácil, pois ele organiza facilmente.

.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>

inserir a descrição da imagem aqui

1
  • Jovem fiz uma resposta 100% com flex-box e com detalhes para vc entender melhor como foi feito. Repare que agora não tem problema pra vc usar order caso queira, pois eu mantive seu HTML intácto só mexi no CSS e todas as div continuam irmãs agora.
    – hugocsl
    11/02/2019 às 10:47

2 Respostas 2

4

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.

inserir a descrição da imagem aqui

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>

2
  • 1
    Obrigado Hugo é isso que queria!! 11/02/2019 às 11:51
  • 1
    @IsmaelSIlva legal jovem!! Se ainda ficar com alguma dúvida de algum detalhe é só falar. Abs
    – hugocsl
    11/02/2019 às 11:53
1

Você poderia incluir as divs 2 e 3 em uma outra div contêiner, criando uma segunda coluna. Também é preciso ajustar alguns estilos no CSS, removendo o sinal > e alterando a largura das divs 2 e 3 para 100%, já que elas vão estar em um contêiner com os 40% de largura:

.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>

4
  • Entendi, mas queria fazer ele sem o uso de uma div auxiliar, quero usa uma animação no css, para mudar a ordem, mas acho que não vai dar 10/02/2019 às 23:49
  • 1
    Acredito que nada impede de vc alterar a ordem da forma de propus acima. Só acho que com CSS vc não conseguirá alterar a ordem dos elementos. Seria preciso JavaScript.
    – Sam
    11/02/2019 às 0:01
  • Obrigado Sam, pela ajuda! 11/02/2019 às 0:30
  • Valeu! Qq coisa tmj!
    – Sam
    11/02/2019 às 0:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .