Flex Items: Controlling Individual Children

While flex container properties control the group, flex item properties let you override behavior for individual children — giving you fine-grained control over how each item grows, shrinks, and aligns.

1. flex-grow

Defines how much a flex item will grow relative to the rest when there is extra space in the container. The value is a unitless ratio (proportion), not a percentage.

.container { display: flex; }

.item-a { flex-grow: 1; } /* Takes 1 part of free space */
.item-b { flex-grow: 2; } /* Takes 2 parts — twice as wide */
.item-c { flex-grow: 1; } /* Takes 1 part */

[!NOTE] flex-grow: 0 (the default) means the item will not grow beyond its natural size.

Real-world use: Making the main content of a sidebar layout take all remaining space:

.main-content { flex-grow: 1; }
.sidebar      { flex: 0 0 280px; } /* Fixed 280px, never grows */

2. flex-shrink

Defines how much a flex item will shrink relative to the rest when there is not enough space. Default is 1 — all items shrink equally.

.item-no-shrink {
  flex-shrink: 0; /* This item will NEVER shrink — it keeps its size */
  width: 200px;
}

Real-world use: A logo or avatar in a nav that should never get squished:

.nav__logo { flex-shrink: 0; }
.nav__links { flex-shrink: 1; } /* Links can compress on narrow screens */

3. flex-basis

Defines the initial size of a flex item before any growing or shrinking happens. It overrides width in a flex context.

.item {
  flex-basis: 250px;    /* Starts at 250px, then grows/shrinks */
  flex-basis: 30%;      /* Percentage of the container */
  flex-basis: auto;     /* Default — uses the item's width or content size */
  flex-basis: 0;        /* Ignore natural size, distribute purely by flex-grow ratio */
}

auto vs 0 — the key distinction:

• flex-basis: auto + flex-grow: 1 → Items grow proportionally from their own content sizes.
• flex-basis: 0 + flex-grow: 1 → All items are treated as the same starting size — truly equal columns.

4. The flex Shorthand

Always use the shorthand flex instead of setting flex-grow, flex-shrink, and flex-basis separately.

/* flex: grow shrink basis */
.item { flex: 1 1 auto; }  /* Default */
.item { flex: 1; }          /* Shorthand: grow=1, shrink=1, basis=0 */
.item { flex: 0 0 200px; }  /* Fixed 200px — never grows or shrinks */
.item { flex: 2 1 0; }      /* Grows twice as fast, can shrink, starts at 0 */

Common Flex Shorthand Values

Value	Equivalent	Use Case
flex: 1	1 1 0%	Equal-width flexible columns
flex: auto	1 1 auto	Flexible with natural size as baseline
flex: none	0 0 auto	Rigid — won't grow or shrink
flex: 0 0 300px	Fixed size	Sidebar, avatar, fixed panel

5. align-self

Overrides the container's align-items for a single item. Accepts the same values.

.container { display: flex; align-items: center; } /* Default center for all */

.special-item { align-self: flex-end; }   /* This one goes to the bottom */
.another-item { align-self: flex-start; } /* This one goes to the top */
.stretch-item { align-self: stretch; }    /* Overrides center to stretch full height */

6. order

By default, flex items appear in source order. The order property lets you visually reorder them without changing the HTML.

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

[!TIP] Use order for visual reordering on different screen sizes. On mobile, you might want to move the main content before a sidebar without touching the HTML — great for SEO.

7. Practical Summary Table

Property	Default	Controls
flex-grow	0 (don't grow)	How much to expand into free space
flex-shrink	1 (can shrink)	How much to contract when space is tight
flex-basis	auto	Starting size before grow/shrink
flex	0 1 auto	Shorthand for all three
align-self	auto (inherits container)	Individual cross-axis alignment
order	0	Visual rendering order