Layout with Flexbox — CSS: styling

Flexbox

Tired of fighting to center things? Flexbox is the modern way to align and distribute elements without the pain. It is activated by setting display: flex on the container (not on the children); from there, its children are placed in a row.

.container {
  display: flex;
  justify-content: center;  /* horizontal alignment */
  align-items: center;      /* vertical alignment */
  gap: 12px;                /* spacing between children */
}

justify-content: distributes along the main axis (center, space-between, flex-start...).
align-items: aligns along the cross axis (center, stretch...).
flex-direction: column changes the row into a column.

With these few properties you solve most layouts. Seriously: mastering flexbox is the day you stop wrestling with CSS.