0

Pessoal estou tendo uma grande dificuldade para criar com o Flexbox este grid, conforme a imagem abaixo. Eu preciso que ele fique sem tamanho fixo pois quando as imagens forem vistas no celular ficara na mesma posição somente menor. inserir a descrição da imagem aqui

Obrigado

5
  • coloque o código que está tentando em sua pergunta
    – MagicHat
    Commented 21/11/2016 às 21:39
  • @MagicHat eu nem sei por onde começar todos os videos que eu vi só tratam de colunas ou linhas uniformes. Não achei nada que tenha uma foto grade e duas menores usando a mesma altura da foto maior. Commented 21/11/2016 às 21:52
  • Uma coisa é a estrutura, outra é o que ela vai conter...Essa proporção que vc menciona entre o desktop e o celular, não acredito ser o ideal, pois o mobile tem um estilo vertical,,,
    – MagicHat
    Commented 21/11/2016 às 22:22
  • @MagicHat então eu sei. Mas o cliente me pediu assim. Ele quer uma galeria de fotos igual a esta que ele viu num template do WP, link. Ai quando vc muda para mobile ela simplesmente encolhe na proporção. Commented 21/11/2016 às 22:30
  • Saquei...Mas não tenho certeza se o flexbox resolve isso, creio que tem de ser com mediaquerie...
    – MagicHat
    Commented 21/11/2016 às 23:46

1 Resposta 1

1

Primeiro você vai precisar criar um wrapper para englobar as imagens. Depois dividir a imagem da direita e da esquerda em seus respectivos containers.

<div class="wrapper">
  <figure>
    <div class="img-grid double"><img src="http://dummyimage.com/344x210/574357/fff" /><img src="http://dummyimage.com/344x210/574357/fff" /></div>
    <div class="img-grid single"><img src="http://dummyimage.com/660x440/445157/fff" /></div>
  </figure>
</div>

Logo após isso, dê o width que você quer para seu wrapper. Tenha certeza de usar max-width e não width, assim ele irá acompanhar a largura da tela.

.wrapper
  max-width 1024px //site content width
  margin 1em auto 0 auto

E para o resto:

figure
  max-width 100% 
  display flex
  justify-content space-between

.img-grid
  display flex
  flex-direction column // coloca as iamgens uma em cima da outra
  justify-content space-between

.img-grid.double
  flex 0 33%
  min-width 0 // FireFox hack

.img-grid.single
  flex 0 64%
  min-width 0 // FireFox hack

img
  max-width 100%

Aqui está um exemplo para você testar. Faça algumas alterações para ver como tudo funciona. Espero ter ajudado!

http://codepen.io/diego-fortes/pen/XNOBWy

2
  • Embora este link possa responder à pergunta, é melhor incluir as partes essenciais da resposta aqui e fornecer o link para referência. As respostas apenas por link podem ser invalidadas se a página com o link for alterada. - From Review Commented 19/12/2016 às 16:31
  • 1
    Entendi. Muito obrigado pelo auxílio, editei a resposta! Commented 19/12/2016 às 16:52

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 .