🧩 Flex Item Properties

The Item Property Map

Flex item properties apply to the direct children of a flex container. Where container properties set the overall rules, item properties let individual children opt into different sizing and positioning. There are six:

The first four are all about size along the main axis; align-self is about cross-axis alignment of one item; and order is about visual sequence. We'll take them in that order.

flex-grow

flex-grow is a unitless proportion that says how much of the container's leftover free space an item should absorb. The default is 0 — don't grow. Give items positive values and they share the free space in that ratio.

.item { flex-grow: 0; }  /* default — stays at its basis size */
.item { flex-grow: 1; }  /* grows to claim free space */
.grow-twice { flex-grow: 2; } /* grows twice as fast as a grow: 1 item */

The classic use is a spacer that pushes other items apart: an empty element with flex-grow: 1 soaks up all the free space, shoving whatever follows it to the far edge — the same job the margin-left: auto trick does.

flex-shrink

flex-shrink is the mirror image of grow: it controls how much an item gives up when the items are collectively too big for the container. The default is 1 (items may shrink); set it to 0 to forbid shrinking entirely.

.item { flex-shrink: 1; }  /* default — may shrink when space is tight */
.no-shrink { flex-shrink: 0; } /* never shrink below its basis */
.shrink-fast { flex-shrink: 2; } /* gives up space twice as fast */

.sidebar {
  flex: 0 0 250px;   /* grow 0, shrink 0 — stays exactly 250px */
}
.main {
  flex: 1 1 auto;    /* grows and shrinks to fill what's left */
}

flex-basis

flex-basis sets an item's starting main size — the size it has before grow and shrink adjust it. It accepts a length (200px, 50%) or the keyword auto (use the item's content or explicit width/height).

/* Truly equal columns, content length ignored */
.column { flex: 1 1 0; }

/* Content-aware columns, wider content = wider column */
.column { flex: 1 1 auto; }

The flex Shorthand

The flex property sets flex-grow, flex-shrink, and flex-basis in one declaration — in that order. Prefer it over the longhands; it's more concise and it sets sensible defaults for the values you omit.

/* grow shrink basis */
.item { flex: 1 1 200px; }

/* Common one-value and two-value forms */
.item { flex: 1; }        /* => 1 1 0   — fully flexible, equal sizing */
.item { flex: auto; }     /* => 1 1 auto — flexible but content-aware */
.item { flex: none; }     /* => 0 0 auto — fully rigid */
.item { flex: 0 0 200px; }/* fixed 200px, no grow or shrink */

Mixing shorthand values lets you build rich layouts. A dashboard with normal, wide, and fixed widgets:

.widget       { flex: 1 1 250px; }  /* flexible, min basis 250px */
.widget-wide  { flex: 2 1 500px; }  /* grows twice as much */
.widget-fixed { flex: 0 0 200px; }  /* locked at 200px */

align-self & order

align-self — one item, its own cross-axis alignment

align-self overrides the container's align-items for a single item. It takes the same values — auto (default, follow the container), flex-start, center, flex-end, stretch, baseline.

.toolbar { display: flex; align-items: center; }

/* This one badge drops to the bottom while the rest stay centered */
.toolbar .badge { align-self: flex-end; }

order — visual reordering without touching HTML

Every item defaults to order: 0 and items render in source order. Assigning order values re-sorts them by that number (lowest first); ties fall back to source order. Negative values are allowed and sort before 0.

/* Mobile: main content first, sidebar after */
.sidebar { order: 2; }
.content { order: 1; }

@media (min-width: 768px) {
  .sidebar { order: 1; }  /* desktop: sidebar first */
  .content { order: 2; }
}

Hands-on: Equal-Height Card

<div class="cards">
  <article class="card">
    <div class="card__media">Image</div>
    <div class="card__body">
      <h3>Product A</h3>
      <p>A short description.</p>
    </div>
    <div class="card__footer">
      <span>$19.99</span>
      <button>Add to cart</button>
    </div>
  </article>
  <!-- more cards with longer/shorter bodies -->
</div>

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.card {
  display: flex;
  flex-direction: column;   /* column context: main axis is vertical */
  flex: 1 1 260px;          /* equal, wrapping columns */
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.card__body {
  flex: 1;                  /* grows to fill height → footer sinks to bottom */
  padding: 1rem;
}

.card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f5f5f5;
}

Best Practices & Pitfalls

Summary & Quiz

📚 Further Reading

• MDN — the flex shorthand
• MDN — Controlling ratios of flex items
• CSS-Tricks — A Complete Guide to Flexbox

🚀 What's Next?

You've now covered Flexbox end to end — the model, the container, and the items. Next we step up to CSS Grid, the two-dimensional layout system that handles rows and columns together and pairs beautifully with the Flexbox skills you just built.