Koala Bear National Information Center

Image Gallery

The img element is an inline element. As such just plain images (without text or figcaptions) will automatically appear alongside each other and wrap when the container gets smaller. This is the nature of inline elements (such as images) and do not require flex or float.

In this exercise we will embed the image within the figure element and apply the figcaption element to add a caption to the image. These elements are block elements so we will add flexbox properties so that the gallery will be responsive to varying viewport sizes.

The we will modify the layout so that the images appear in three columns when at desktop view.