Learn
Boundaries and Space
Display: Flex

In the web browser, the gallery images that were arranged neatly in rows are now stacked on the left side of the webpage.

The CSS display value that arranged the images, flex, has been removed. In addition to other capabilities, flex can be used to easily align multiple page elements horizontally.

In the example code below, there is a div with class parent:

<div class="parent"> ... </div>

To make children of the div align horizontally on the webpage, in CSS we can use:

.parent { display: flex; }

Children elements of the div with class parent will now align horizontally. We can make sure no child element moves off the page by using flex-wrap: wrap;:

.parent { display: flex; flex-wrap: wrap; }

Finally, to center rows of children elements, we can use justify-content: center;:

.parent { display: flex; flex-wrap: wrap; justify-content: center; }

Instructions

1.

Before we start working with flex, expand the web browser view by clicking the arrow button in the top right corner. Take a moment to notice that the image gallery is arranged vertically and off-center.

Next, locate the .gallery class selector in main.css. Set the display property to flex.

Run your code to see the gallery images align horizontally.

2.

There’s a problem. If you look to the right side of the webpage, some of the gallery images are cut off.

To solve this, below the display: flex; property, create a flex-wrap property and set it to wrap;.

Run your code to see the gallery images now wrapping to the next row.

3.

Finally, we will center the gallery images. For the .gallery selector, add the property justify-content and set it to center.

Run your code to see the images centered on the webpage.

Folder Icon

Take this course for free

Already have an account?