Overview
This demo shows how to use flexbox to create a responsive gallery of images with text below each image. 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 rotate slightly to when cursor is over top using the
transform: scale() and img:hover rules.
