Skip to main content

How to Create a Responsive Image Gallery with Flexbox

Flexbox is a CSS layout module that makes the creation of fully flexible user interfaces possible. It offers an easy-to-use alternative to floats and a couple of jQuery plugins such as image gallery libraries as well. Flexbox is an ideal choice for several typical CSS tasks and fits especially well with one-dimensional layouts.

In this article, we will look into how to use flexbox to create a responsive image gallery that looks well at every viewport size.

1. Create the HTML

First, let’s create the HTML. It’s a simple div that includes a couple of img tags. The images are pulled and randomly generated from the Unsplash Source API. The .container class stands for the flex container, while the .item class will hold the flex items.

<body>
   <div class="container">
      <img class="item" src="https://source.unsplash.com/random/320x240" alt="Example image">
      <img class="item" src="https://source.unsplash.com/random/320x240" alt="Example image">
      <img class="item" src="https://source.unsplash.com/random/320x240" alt="Example image">
      <img class="item" src="https://source.unsplash.com/random/320x240" alt="Example image"> 
      <img class="item" src="https://source.unsplash.com/random/320x240" alt="Example image">
      <img class="item" src="https://source.unsplash.com/random/320x240" alt="Example image">     
   </div>
</body

This is how our image gallery looks like in Firefox 64.0.2, without using any CSS:

Image gallery without CSS

The browser has stacked the images next to each other nicely, retaining their original 320×240 px size. However, if you try to resize the browser window you’ll see that the images are not responsive—which is even a bigger problem if you use larger images. It would be hard to modify their position and alignment as well. Flexbox will make the images much easier to handle.

2. Add Basic Reset Styles

To remove the default browser styling, let’s start the CSS with some reset styles. We’ll use a simplified version of Eric Meyer’s reset stylesheet. It will only include the HTML elements we need for the gallery (html, body, div, img).

We’ll also add the box-sizing: border-box property to the whole page so that the paddings and borders will be included in the total widths and heights of the elements. It’s frequently recommended to use this CSS rule for flexbox, as otherwise paddings and borders might disappear at the end of the rows.

* {
    box-sizing: border-box;
}
html, body, div, img {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
body {
    line-height: 1;
}

3. Create the Flexbox Layout

Creating the flexbox layout is pretty simple—just one line of code. We only need to set the flex container to display: flex. We don’t have to add any CSS rules to the flex items at the moment.

.container {
    display: flex;
}

Below, you can see how our image gallery looks like now. Note that as we are randomly generating the images, they will change on every browser reload.

Image gallery with display flex

Now, all the images fit into the same row. The browser has adapted the widths and heights of the images to the size of the viewport. If you resize your browser window, you’ll see that the images have become flexible. They grow and shrink according to the available space.

4. Wrap the Images

Stacking all images in the same row can be a good solution for some layouts, for instance, if you have just a few images (or icons). However, image grids are used more frequently, especially for galleries, so let’s see how to force the images into a neat grid.

We’ll need to use the flex-wrap property that specifies if the flex items are laid out in one or multiple lines. Its default value is nowrap which means that all items are laid out in a single line. However, if we set it to wrap, the images will nicely flow into a grid. We need to add the flex-wrap rule to the flex container:

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

After reloading the page, you can see that the images have retained their original sizes (320×240 pixels) and wrapped into multiple rows.  

Image gallery with flex-wrap

In fact, this layout is very similar to the one we started with, before adding the CSS. However, with flexbox, the images are fully responsive—you can test it by resizing the browser window. Another advantage is that now the images (flex items) can be easily positioned in different ways (we’ll see how to do it below).

5. Add a Gap

Before looking into the alignment, let’s add some gap around the images. Probably the biggest shortcoming of flexbox is that it has no gap property similar to CSS grid’s grid-gap.

So, we will use the traditional method and add some margins around the flex items. As the margins in-between two adjacent images will add up (will be 10px instead of 5px), we’ll also add a 5px padding around the flex container.

.container {
     display: flex;
     flex-wrap: wrap;
     padding: 5px;
}
.item {
     margin: 5px;
}

Below, you can see that the gaps have appeared around the images:

Flexbox image gallery with image gaps

6. Align the Images

The flexbox layout module allows us to align flex items in a couple of different ways, using the justify-content CSS property. Its default value is flex-start that lays out flex items from the beginning to the end of the row. This is what you could see in the above example.

However, we can also lay the images out in the opposite direction using the flex-end value. This layout can be especially useful if you have to support RTL (right-to-left) languages:

.container {
     display: flex;
     flex-wrap: wrap;
     padding: 5px;
     justify-content: flex-end;
}
.item {
     margin: 5px;
}

The code above leads to the following layout:

Image gallery flex end

The justify-content property has three less frequently used values as well. If you use them in production don’t forget to test them by resizing the browser window to see how your image gallery behaves at different viewport sizes.

The space-between value sticks the first item to the beginning of the row and the last item to the end of the row:

.container {
     display: flex;
     flex-wrap: wrap;
     padding: 5px;
     justify-content: space-between;
}
.item {
     margin: 5px;
}

Flexbox image gallery with space-between alignment

The space-around value adds a half-size space to both ends of the row:

.container {
     display: flex;
     flex-wrap: wrap;
     padding: 5px;
     justify-content: space-around;
}
.item {
     margin: 5px;
}

Flexbox image gallery with space-around alignment

Finally, the space-evenly value adds equal spaces around each flex item:

.container {
     display: flex;
     flex-wrap: wrap;
     padding: 5px;
     justify-content: space-evenly;
}
.item {
     margin: 5px;
}
Flexbox image gallery with space-evenly alignment

The last three alignments are probably not the best choices for smaller images but they might look good with larger images or when the gallery doesn’t span across the full screen.

Browser Support

The browser support of flexbox is fairly good these days. It fully works with all modern browsers including mobile browsers and partially with Internet Explorer 11, too. Actually, the features we have used for the image gallery are all supported by IE11 as well. You can check out IE11’s flexbox issues under the “Known issues” tab on CanIUse.

Flexbox browser support

Conclusion

Flexbox makes the creation of responsive image galleries a straightforward process. Without special alignment, the CSS of the gallery is just eight lines of code (see Step 5). In case you don’t need gaps, it’s even fewer.

However, note that this flexbox image gallery is only a good choice if all images have the same size. It’s important to know that flexbox does have issues with keeping aspect ratio when images have different widths and heights. In such cases, the best solution is to lay out the image gallery using the CSS grid.

Wp-dd.com

WordPress Design, WordPress Development, cPanel Hosting, Web Design, Web Development, Graphic Design, Mobile Development, Search Engine Optimization (SEO) and more.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.