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