CSS Flexbox Advanced: flex-grow vs flex-basis, Auto Margins, and the Firefox Flex Inspector

CSS Flexbox handles one-dimensional layouts — rows or columns. Most developers know the basics, but the advanced flex properties enable precise alignment, sizing, and ordering that solves complex real-world layout problems. Firefox has excellent Flex inspection in DevTools.

The Flex Model

Flex containers establish a flex formatting context. Children become flex items.

.container {
  display: flex; /* or inline-flex */
  flex-direction: row; /* row (default), row-reverse, column, column-reverse */
  flex-wrap: nowrap; /* nowrap (default), wrap, wrap-reverse */
  /* Shorthand: */
  flex-flow: row wrap;
}

Alignment

Two axes: main axis (flex-direction) and cross axis (perpendicular).

.container {
  /* Main axis alignment */
  justify-content: flex-start; /* default */
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between; /* gaps between items */
  justify-content: space-around;  /* gaps around items */
  justify-content: space-evenly;  /* equal gaps everywhere */

  /* Cross axis alignment */
  align-items: stretch; /* default: items stretch to fill cross size */
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;
  align-items: baseline; /* align text baselines */

  /* Multi-line cross axis alignment (when flex-wrap: wrap) */
  align-content: flex-start;
  align-content: space-between;
  align-content: stretch;

  /* Shorthand for both axes */
  place-items: center;        /* align-items justify-items */
  place-content: space-between center; /* align-content justify-content */
}

Flex Item Properties

.item {
  /* Growth factor: how much extra space item gets */
  flex-grow: 0; /* default: don't grow */
  flex-grow: 1; /* gets 1 share of extra space */
  flex-grow: 2; /* gets 2 shares (twice as much as flex-grow: 1) */

  /* Shrink factor: how much item shrinks when container is too small */
  flex-shrink: 1; /* default: shrink equally */
  flex-shrink: 0; /* never shrink */

  /* Base size before distribution */
  flex-basis: auto; /* use item's natural size */
  flex-basis: 200px; /* start at 200px, then grow/shrink */
  flex-basis: 0; /* ignore content size, distribute purely by flex-grow */

  /* Shorthand: flex-grow flex-shrink flex-basis */
  flex: 0 0 200px; /* Fixed 200px, no grow/shrink */
  flex: 1;         /* Same as flex: 1 1 0 — equal distribution */
  flex: auto;      /* flex: 1 1 auto — grow/shrink proportionally from natural size */
  flex: none;      /* flex: 0 0 auto — don't flex at all */
}

The flex: 1 Shorthand

/* These are equivalent: */
.item { flex: 1; }
.item { flex-grow: 1; flex-shrink: 1; flex-basis: 0; }

/* vs. */
.item { flex: 1 1 auto; }
/* flex-basis: auto means "start from content size" */
/* flex-basis: 0 means "ignore content, distribute proportionally" */

The difference matters for unequal content sizes:

• flex: 1 (basis 0): all items get equal space regardless of content
• flex: auto: items start at their natural size, then extra space is distributed

Per-Item Alignment Override

.container { align-items: center; }

.item-special {
  align-self: flex-start; /* Overrides container's align-items */
}

.item-fill {
  align-self: stretch;
}

Order

Change visual order without changing DOM order (affects tab order too, so use carefully):

.container { display: flex; }

.first { order: 1; }
.second { order: 2; }
.third { order: -1; } /* Negative values come first */

Tab order follows DOM order, not visual order — using order while adding interactive content can confuse keyboard users.

Practical Patterns

Sticky Footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* Grows to fill space, pushing footer down */
}

footer {
  /* Natural size — no flex needed */
}

Centering (Classic Flexbox Use Case)

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

/* Alternative with auto margins */
.container { display: flex; }
.centered-item { margin: auto; } /* Auto margins in flex: absorb all available space */

Navigation Bar

.navbar {
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}

.navbar .logo { margin-right: auto; } /* Pushes everything else to the right */
.navbar .menu { display: flex; gap: 8px; }
.navbar .actions { display: flex; gap: 8px; }

Card Grid with Equal Heights

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

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-content { flex: 1; } /* Pushes footer to bottom of each card */
.card-footer { /* Natural height */ }

Firefox DevTools: Flex Inspector

Firefox's Layout panel has excellent Flex visualization:

1. Open DevTools → Layout tab
2. Under "Flex" section, click the flex icon on any flex container
3. The overlay shows:
   • Item boundaries
   • Flex lines
   • Available free space
   • Item grow/shrink behavior

The overlay is interactive — hover over items to see their computed flex-grow, flex-shrink, flex-basis, and final size.

Auto Margins in Flex

Flexbox auto margins absorb free space:

.nav { display: flex; align-items: center; }
.nav .logo { /* natural size */ }
.nav .spacer { flex: 1; } /* Takes all free space */
.nav .login { /* natural size */ }

/* Alternative: auto margin on logo pushes everything else right */
.nav .logo { margin-right: auto; }

Both patterns achieve the same result: logo on left, login on right.