Flexbox

Flexbox allows us to create dynamic and responsive one-dimensional layouts.

Axes

The flexbox layout positions elements across two axes: main and cross. Depending on the flex-direction of the container, elements will align in rows or columns.

The flex container

To use flexbox, we contain the elements we’d like to lay out on the page within a container. The container’s display property should be set to flex.

Alignment and justification

Elements will be aligned and justified on the main and cross axes. We can use different values of the justify-content and align-items properties to define our layout.

Create a project gallery which uses a flexbox layout. You’ll need to add a container to keep each element and use properties such as justify-content, align-items, and flex-wrap to display the elements on the page.

Your project gallery could feature some of the websites you’ve built already while working through the application requirements.

Learn more

These are only some of the properties used in flexbox. This guide is a fantastic resource to get you started. For a more interactive tutorial, check out Flexbox Froggy or Flexbox Zombies.

CSS Grid offers two-dimensional layouts for your websites - learn more about it with this guide or with Grid Garden.