Basics · Layout

Flexbox

By default a <div> is a block: its children stack vertically. That is the UA default for HTML containers, so a flex row is always an explicit opt-in — set display: flex.

Inside a flex container, flex-direction picks the main axis (column is the default, row lays out left to right), gap puts cells between children, and justify-content distributes them along the main axis: start, end, center, space-between, space-around, space-evenly. align-items handles the cross axis (stretch by default, or start / center / end).

The footer below stacks its three items vertically. A toolbar wants them in a row, pushed to the edges.

Your turn

Make the footer a horizontal flex row that spreads its items out:

.footer {
    display: flex;
    flex-direction: row;
    gap: 1;
    justify-content: space-between;
    align-items: center;
}

Press Run — the count sits on the left and the buttons spread across to the right.