Make this grid with Flexbox

Navigation
0

Personally I'm having a hard time creating Flexbox with this grid, as shown below. I need it to be without fixed size because when the images are viewed on the phone it will be in the same position only smaller.

Thank you

    
asked by anonymous 21.11.2016 / 22:23

1 answer

1

First you will need to create a wrapper to encompass the images. Then divide the image of the right and left in their respective containers. 

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

Soonafterthis,givethewidthyouwantforyourwrapper.Besuretousemax-widthandnotwidth,soitwillkeeptrackofthewidthofthescreen.

.wrappermax-width1024px//sitecontentwidthmargin1emauto0auto

Andfortherest:

figuremax-width100%displayflexjustify-contentspace-between.img-griddisplayflexflex-directioncolumn//colocaasiamgensumaemcimadaoutrajustify-contentspace-between.img-grid.doubleflex033%min-width0//FireFoxhack.img-grid.singleflex064%min-width0//FireFoxhackimgmax-width100%

Hereisanexampleforyoutotest.Makesomechangestoseehoweverythingworks.IhopeIhavehelped!

link

    
19.12.2016 / 16:54
Intellisense Xamarin Forms does not work - Visual Studio Enterprise with Update 3 Return of a binary search