Layout

Flexbox Basics

Flexbox arranges items in one direction, a row or a column, and makes spacing and alignment easy. It is perfect for navbars, button groups, cards in a row and centring things.

Syntax:

.container {
  display: flex;
}

All direct children of .container now sit in a row.

Property (on container)	Values
`flex-direction`	`row` (default), `column`, `row-reverse`
`flex-wrap`	`nowrap` (default), `wrap`
`gap`	Space between items, e.g. `16px`

.navbar {
  display: flex;
  gap: 24px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}