CSS Flexbox

Flexbox lays out items along one main axis, making rows, columns, and alignment easier.

What you will learn

How to create a flex container
How to control direction, spacing, and alignment

Minimal example

.menu { display: flex; gap: 1rem; justify-content: space-between; align-items: center; }

These declarations place children in a row with space between them and align them on the cross axis.

Common mistakes

Flex properties such as justify-content apply to the container.
Use Grid when you need strong control of both rows and columns.