CSS Flexbox Layout

Definition: Flexbox is the modern way to arrange elements in a row or column. Add display: flex to a container and its children line up neatly, with easy control over spacing and alignment.

Turn on flex

.row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

The key properties

• display: flex — lay the children out in a row
• gap — space between the children
• justify-content — horizontal alignment: center, space-between, flex-start
• align-items — vertical alignment

Flexbox replaced a lot of old, fiddly layout tricks. It is how most page sections are arranged today.

💡 Tip: change justify-content to space-between below and watch the boxes spread apart.