Flex Item Properties Overview

While container properties control the overall layout, flex item properties control how individual items behave within the flex container. These properties give you precise control over sizing, growing, shrinking, alignment, and ordering.

flex-grow

flex-grow defines how much a flex item should grow relative to other items when there is extra space available. The default value is 0 (don't grow).

CSS

.item-1 { flex-grow: 0; } /* Don't grow (default) */
.item-2 { flex-grow: 1; } /* Take up available space */
.item-3 { flex-grow: 2; } /* Take up TWICE as much extra space as item-2 */

How flex-grow Works

The browser distributes remaining space proportionally based on flex-grow values:

CSS

.container { display: flex; width: 600px; }
/* Items have 100px content each = 300px used, 300px remaining */

.a { flex-grow: 1; } /* Gets 100px of extra space (1/3) = 200px total */
.b { flex-grow: 1; } /* Gets 100px of extra space (1/3) = 200px total */
.c { flex-grow: 1; } /* Gets 100px of extra space (1/3) = 200px total */

CSS

.a { flex-grow: 2; } /* Gets 150px of extra space (2/4) = 250px total */
.b { flex-grow: 1; } /* Gets 75px of extra space (1/4) = 175px total */
.c { flex-grow: 1; } /* Gets 75px of extra space (1/4) = 175px total */

flex-shrink

flex-shrink defines how much a flex item should shrink when there isn't enough space. The default value is 1 (shrink equally).

CSS

.item-1 { flex-shrink: 1; } /* Shrinks normally (default) */
.item-2 { flex-shrink: 0; } /* Won't shrink at all */
.item-3 { flex-shrink: 2; } /* Shrinks twice as much as item-1 */

Preventing Shrink

CSS

/* Sidebar stays at 300px, main content shrinks */
.sidebar {
  flex-shrink: 0;
  width: 300px;
}

.main {
  flex-shrink: 1;
}

flex-basis

flex-basis sets the initial size of a flex item before growing or shrinking occurs. Think of it as the item's ideal size.

CSS

.item { flex-basis: 200px; }  /* Start at 200px */
.item { flex-basis: 30%; }    /* Start at 30% of container */
.item { flex-basis: auto; }   /* Use width/height value (default) */
.item { flex-basis: 0; }      /* Ignore content size */

flex-basis vs width

CSS

/* flex-basis is preferred inside flex containers */
.item {
  flex-basis: 300px; /* Used by flexbox algorithm */
  width: 300px;      /* Fallback / non-flex context */
}

When both are set, flex-basis takes priority in a flex context.

The flex Shorthand

The flex shorthand combines flex-grow, flex-shrink, and flex-basis:

CSS

/* flex: grow shrink basis */
.item { flex: 1 1 auto; }   /* Grow, shrink, use content size */
.item { flex: 0 0 300px; }  /* Don't grow/shrink, stay at 300px */
.item { flex: 1 0 200px; }  /* Grow from 200px, never shrink below */

Common flex Shorthand Values

CSS

/* flex: 1 — most common, means flex: 1 1 0 */
.item { flex: 1; }
/* Grow equally, shrink equally, ignore content size */

/* flex: auto — means flex: 1 1 auto */
.item { flex: auto; }
/* Grow equally, shrink equally, use content size as basis */

/* flex: none — means flex: 0 0 auto */
.item { flex: none; }
/* Don't grow, don't shrink, use content size */

/* flex: 0 — means flex: 0 1 0 */
.item { flex: 0; }

align-self

align-self overrides the container's align-items for an individual item:

CSS

.container {
  display: flex;
  align-items: flex-start; /* All items align to top */
}

.special-item {
  align-self: flex-end;    /* This item aligns to bottom */
}

.centered-item {
  align-self: center;      /* This item centers vertically */
}

.stretched-item {
  align-self: stretch;     /* This item stretches full height */
}

order

order changes the visual order of flex items without changing the HTML. The default order is 0.

CSS

.item-a { order: 3; } /* Appears third */
.item-b { order: 1; } /* Appears first */
.item-c { order: 2; } /* Appears second */

Practical Use

CSS

/* Move sidebar before main content on mobile */
.main { order: 1; }
.sidebar { order: 2; }

@media (max-width: 768px) {
  .sidebar { order: 1; } /* Sidebar appears first on mobile */
  .main { order: 2; }
}

Note: Changing visual order with CSS does NOT change tab order or screen reader order. Use with caution for accessibility.

Practical Layouts

Sidebar + Main Content

CSS

.layout {
  display: flex;
  gap: 2rem;
}

.sidebar {
  flex: 0 0 280px; /* Fixed width, no grow/shrink */
}

.main-content {
  flex: 1; /* Takes remaining space */
}

Equal-Width Cards

CSS

.card-row {
  display: flex;
  gap: 1.5rem;
}

.card {
  flex: 1; /* All cards equal width */
}

Holy Grail Layout

CSS

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

.header { flex: none; }
.footer { flex: none; }

.middle {
  display: flex;
  flex: 1;
  gap: 1rem;
}

.left-sidebar { flex: 0 0 200px; }
.main { flex: 1; }
.right-sidebar { flex: 0 0 200px; }

Input with Button

CSS

.input-group {
  display: flex;
}

.input-group input {
  flex: 1; /* Takes available space */
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-right: none;
}

.input-group button {
  flex: none; /* Button keeps its natural size */
  padding: 0.75rem 1.5rem;
}

Summary

Flex item properties give you granular control: flex-grow distributes extra space, flex-shrink handles overflow, flex-basis sets the starting size, and the flex shorthand combines all three. Use align-self to override alignment for individual items, and order to rearrange visual order. The most common pattern is flex: 1 for items that should share space equally.