Flexbox Responsive Gallery

Flexbox is a fully flexible layouts for creating image gallery and complex designs, its is very easy to us.

here in this article we will know how to create Responsive image gallery using flexbox.

<div class="item_container">
   <img class="item" src="images/1.jpg" />
   <img class="item" src="images/2.jpg" />
</div>

First of all we set css for parent div .item_container display:flex;

.item_container
{
  display:flex;
}

When we set div css display:flex, then it sets all images in one row. and rest of the image gone in overflow,

lets resize the image size and fit 5 image in one row. for thsi we have to set .item class width:20%;

.item 
	{
		width:20%;
	}

We have fit 5 images in one row lets, now rest of images not showing lets show that image in another line for that ….

.item_container
	{
		display:flex;
		flex-wrap: wrap;
	}

Now images showing in two lines, now we want to show only two images in one row in mobile view lets see how to do…..

@media (max-width: 767px) 
    {
	.item 
	{
		box-sizing:border-box;
		width:50%;
	}
}

By using this method we can create fully responsive image gallery using flexbox.

Leave a Reply

avatar
  Subscribe  
Notify of