Flexbox Layout

Flexbox Layout

Flexbox is the most important CSS layout tool for component-level layout — navbars, card rows, centering.

Container Properties

.container {
  display: flex;
  flex-direction: row;              /* row (default) | column */
  justify-content: space-between;   /* main axis */
  align-items: center;              /* cross axis */
  flex-wrap: wrap;
  gap: 16px;
}

Perfect Centering

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Three lines. Centers anything horizontally and vertically. No more hacks.

Responsive Cards

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card { flex: 1 1 280px; }

Cards wrap to new lines when they cannot fit. Responsive with zero media queries.

flex shorthand

flex: 1;          /* grows and shrinks to fill available space */
flex: 0 0 200px;  /* fixed 200px — no grow, no shrink */

Sidebar Layout

.layout  { display: flex; gap: 32px; }
.sidebar { flex: 0 0 260px; }
.main    { flex: 1; }

Navbar Pattern

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}