Flexbox

Flexbox makes it easy to lay out elements in a row or column. The parent becomes a flex container and controls how children are arranged. Think of it like a shelf: you decide if items go left-to-right or top-to-bottom, how spaced out they are, and how they align.

.container {
  display: flex;
  flex-direction: row;        /* row or column */
  justify-content: center;    /* horizontal alignment */
  align-items: center;        /* vertical alignment */
  gap: 16px;                  /* space between items */
  flex-wrap: wrap;            /* wrap to next line */
}

.item {
  flex: 1;  /* each item takes equal space */
}