Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Web Browser

Code Editor
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; }
Report a Bug
If you see a bug or any other issue with this page, please report it here.