CSS Flexbox

Overview

Flexbox arranges items along a main axis (row or column) with powerful alignment and distribution. Use it for nav bars, card rows, centering content, and responsive toolbars.

Syntax / Usage

.container {
  display: flex;
  flex-direction: row;        /* row | column */
  justify-content: center;    /* main axis */
  align-items: center;        /* cross axis */
  gap: 1rem;
  flex-wrap: wrap;
}

.item {
  flex: 1;                    /* grow and shrink */
  flex: 0 0 200px;            /* fixed basis */
  align-self: flex-end;
}

Common patterns:

/* Center anything */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Push footer down */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main { flex: 1; }

Examples

Responsive nav:

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

Equal-width columns:

.row {
  display: flex;
  gap: 1rem;
}
.col { flex: 1; }

Common Mistakes

• Using flexbox for full two-dimensional page grids—CSS Grid may fit better
• Forgetting min-width: 0 on flex children that truncate text
• align-items: stretch default causing unwanted stretching
• Nesting too many flex containers without semantic structure

See Also

grid box-model responsive-design selectors