CSS Flex Items

Flex Container steered the parent. Flex items answer a different question: how does each child grow, shrink, and start sizing inside that row or column? Master basis, grow, and shrink before chasing responsive flex patterns.

A flex items toolkit

📊 Flex items at a glance

Property	Everyday job
`flex-basis`	Starting main size before free space is distributed
`flex-grow`	How much leftover space this item claims (unitless factor)
`flex-shrink`	How willingly this item shrinks when space is tight
`flex`	Shorthand for grow, shrink, and basis
`align-self`	Overrides the container’s `align-items` for one item
`order`	Changes visual order (use sparingly — keep DOM/accessibility sane)

Think of basis as the item’s preferred starting length on the main axis. Grow and shrink then negotiate whatever free or missing space remains.

flex-grow — take leftover space

A factor of 1 lets an item expand into free space. Sibling factors compete: two items with flex-grow: 1 split leftovers evenly.

Growing main column

css

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

.layout__main {
flex-grow: 1;
}

.layout__aside {
flex-grow: 0;
width: 14rem;
}

flex-basis — start from a size

flex-basis sets the starting main size before grow/shrink math. Prefer basis for the flex algorithm; width/height still matter, but basis is the flex-native starting point.

Sidebar with basis

css

.layout__aside {
flex-basis: 14rem;
flex-grow: 0;
flex-shrink: 0;
}

flex-shrink — give space back

When the row is too tight, shrink factors decide who compresses. flex-shrink: 0 protects icons or fixed rails from being crushed.

Protect from squash

css

.icon-rail {
flex-shrink: 0;
flex-basis: 3rem;
}

The flex shorthand

flex: grow shrink basis packs the trio. Common calm defaults: flex: 1 (grow, allow shrink, basis auto) for a filling child; flex: 0 0 auto for a rigid chip.

Flex shorthand

css

.card__body {
flex: 1 1 auto;
}

.card__badge {
flex: 0 0 auto;
}

align-self — one item, different cross alignment

Override the container’s align-items for a single child. Useful when one badge should stick to the start while siblings stay centered.

Align-self override

css

.row {
display: flex;
align-items: center;
gap: 0.75rem;
}

.row .note {
align-self: flex-start;
}

A calm flex item habit

Basis first for intended size, then grow/shrink factors, then shorthand to tidy. Use align-self sparingly. Avoid order tricks that scramble keyboard and screen-reader flow — and leave media-query flex patterns for Flex Responsive.

Named item roles

css

.cluster__main {
flex: 1 1 auto;
}

.cluster__meta {
flex: 0 0 auto;
align-self: center;
}

Try it yourself

Make a main + aside row; give main flex-grow: 1.
Set the aside with flex-basis: 14rem and flex-shrink: 0.
Protect an icon with flex-shrink: 0.
Rewrite grow/shrink/basis using the flex shorthand.
Override one child’s cross alignment with align-self.

Common mistakes

Putting flex-grow on the container instead of an item
Confusing width with flex-basis and wondering why flex math disagrees
Reordering with order and breaking tab/source order
Letting logos squash because shrink stayed at the default
Treating this lesson like the Flex Responsive module

Summary

Flex items control grow, shrink, and starting basis
flex-grow shares free space; flex-shrink shares the squeeze
flex-basis is the flex starting size on the main axis
flex shorthand and align-self refine individual children
Responsive flex patterns come next; use order with care

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top

Language