Flexbox

Flexbox is set of CSS properties that help you define layout of elements on a page in one direction –– either horizontally, in row, or vertically, in column orientations.

Create a flexbox container

We can change a container element into a "flex container" with the display: flex; rule, and set the direction of the flexbox with the flex-direction property, either set to row or column.

This is a row flexbox.

We can change how items are aligned using the justify-content and align-items CSS properties. The first controls how items are aligned in the direction of the flexbox, while the latter controls how items are aligned orthogonally to the direction of the flexbox.

This flexbox is justified to center everything.

This flexbox aligns everything to the end.

This flexbox uses space-around, which tells CSS to leave equal space between all elements in the box.

You can find much more information about the power of flexbox layouts at sites like CSS-Tricks and MDN.