Overview
This demo shows how to use flexbox to create a responsive gallery of images. MDN has a good guide on flexbox which can be found HERE. The example below uses 2
types of divs:
- One container div that holds all the gallery items. This div will be styled (using style.css) using it's own class and contain rules for the flexbox in general.
- A container for each gallery item. These will all use the same class and the style (created using style.css) contains rules for how individual elements should be displayed within the parent flexbox.
Some other notes on the design:
- A border is used on the container div to show the boundaries of the container.
- Spacing for each element is controlled using
padding and margin rules.
- Images grow slightly to when cursor is over top using the
transform: scale() and img:hover rules.
- Each of these images could be a link by housing it inside an
a tag.
