Overview
This demo shows how to use flexbox to create a responsive gallery of different size images. The example below uses 1 type of div and 2 tpes of photos:
- One class used to style a 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.
- Two classes used to delineate large and small images. Each class has it's own flex rules that cause the size differences.
Some other notes on the design:
- A border and background color are used on the container div to show the boundaries of the container.
- Sizing for each element is controlled using
flex: rules.
- Images darken slightly to when cursor is over top using the
opacity and img:hover rules.
