Create an Automatically Responsive Flexbox Gallery

Share this video with your friends

Send Tweet

With just a handful of CSS properties, we can create an intrinsically responsive photo gallery using flexbox. This is accomplished by setting our preferred width as the flex-basis value and allowing items to both shrink and grow. The use of object-fit: cover on images allows them to fully fill up the list item without distortion or overflow. We finish the gallery with a small animated effect that alters opacity.