CSS Flexbox

Flexbox Model and Container Properties

Flexbox is a one-dimensional layout model that distributes space along a single axis.

Enabling Flexbox

.container {
  display: flex;          /* inline flex: display: inline-flex */
  flex-direction: row;    /* row | row-reverse | column | column-reverse */
  flex-wrap: wrap;        /* nowrap | wrap | wrap-reverse */
  justify-content: space-between; /* main axis alignment */
  align-items: stretch;           /* cross axis alignment */
  align-content: flex-start;      /* multi-line cross axis */
  gap: 1rem;                      /* spacing between items */
}

Main Axis vs Cross Axis

• flex-direction: row → main axis is horizontal (left→right)
• flex-direction: column → main axis is vertical (top→down)
• justify-content controls the main axis
• align-items controls the cross axis

The Gap Property

.flex-container {
  display: flex;
  gap: 16px;           /* uniform spacing */
  row-gap: 8px;        /* vertical gap only */
  column-gap: 16px;    /* horizontal gap only */
}

Gap applies only between items, not at the edges — unlike margin on items which adds space outside.

Flex Item Properties

Growth, Shrink, and Basis

.item {
  flex-grow: 1;    /* how much to grow relative to siblings (0 = don't grow) */
  flex-shrink: 1;  /* how much to shrink (0 = don't shrink) */
  flex-basis: 0;   /* starting size before growing/shrinking */
}

/* Shorthand */
.item { flex: 1; }            /* grow:1, shrink:1, basis:0 */
.item { flex: 0 0 200px; }    /* fixed 200px, no grow/shrink */
.item { flex: 1 1 auto; }     /* grow equally, use content size as basis */

Alignment Overrides

.item {
  align-self: center;         /* override container's align-items */
  justify-self: end;          /* only works in multi-axis (grid) */
  order: 2;                   /* visual order (default 0) */
}

Practical Examples

/* Equal-width columns */
.columns { display: flex; gap: 1rem; }
.columns > * { flex: 1; }

/* Sidebar layout */
.layout { display: flex; gap: 2rem; }
.sidebar { flex: 0 0 250px; }
.content { flex: 1; }

/* Auto-margin trick — push remaining items */
.nav { display: flex; gap: 1rem; align-items: center; }
.nav .spacer { flex: 1; }  /* takes remaining space */

The flex shorthand is almost always what you want. Avoid setting flex-grow and flex-shrink independently unless you have a specific reason.

Centering Patterns

Flexbox solved CSS centering once and for all.

Perfect Centering

.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Horizontal Centering Only

.h-center {
  display: flex;
  justify-content: center;
}

Vertical Centering Only

.v-center {
  display: flex;
  align-items: center;
  min-height: 100vh;
}

Centering a Fixed-Width Element

.center-block {
  display: flex;
  justify-content: center;
}
.center-block > .card {
  max-width: 600px;
  width: 100%;
}

Centering Text (No Flexbox Needed)

.center-text {
  text-align: center;
  line-height: 1.5;
}

Common Mistake

Don't add display: flex to the element you want to center — add it to the parent. The child is the flex item.

Real-World Layouts

Responsive Navigation Bar

.navbar {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #1a1a2e;
  color: white;
}
.navbar .logo {
  flex: 0 0 auto;
  margin-right: auto;  /* push nav links to the right */
}
.navbar nav {
  display: flex;
  gap: 1rem;
}
.navbar nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 0.5rem;
  }
  .navbar .logo {
    margin-right: 0;
  }
}

Card Grid with Equal Heights

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.card .body {
  flex: 1;              /* fills remaining space */
  display: flex;
  flex-direction: column;
}
.card .body .text { flex: 1; }
.card .body .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

Footer Sticking to Bottom

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }
footer { flex-shrink: 0; }

This ensures the footer stays at the bottom even when content is short.