Flex Items: Sizing & Order

Give individual items superpowers. Learn how to make an item consume extra space, stubbornly refuse to shrink, or visually swap places.

CSS6 min readConcept 21 of 43

What it is

While properties like justify-content apply to the **Parent Container**, Flexbox also provides properties that apply directly to the **Children** (the Flex Items).

These properties—flex-grow, flex-shrink, flex-basis, and order—allow individual items to negotiate how much space they consume along the Main Axis.

Why it matters

Imagine a navigation bar with a Logo on the left, a Profile Picture on the right, and a Search Input in the middle. How do you make the Search Input stretch to fill all the available space between them? You give it flex-grow: 1.

How it works

1. **flex-basis**: The *ideal* starting size of the item along the Main Axis before any extra space is distributed or removed. Think of it as a flexible width (in a row).

2. **flex-grow**: If there is free space left over in the container, items with a grow value > 0 will stretch to consume it. A value of 1 means 'take 1 share of the extra space'.

3. **flex-shrink**: If there is not enough space, items with a shrink value > 0 will squish. By default, all items have flex-shrink: 1.

4. **order**: Visually rearranges items without changing the HTML markup. The default order is 0.

Try it

Select a specific item and adjust its grow, shrink, basis, and order properties. Notice how a single item's flex properties influence the entire layout.

Flex Item Sizing

Select Item to Edit

flex-grow

0

Share of free space

flex-shrink

1

0 = Refuse to squish

flex-basis

Ideal starting size

order

0

Visual sorting priority

/* Note: Applied directly to the child item! */
.item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 80px;
order: 0;
}
 
/* The shorthand alternative: */
/* flex: 0 1 80px; */
.flex-containerFixed 320px Width
1
2
3
320px
iSet an item's flex-grow to 1 to watch it eat up the remaining 64px of free space. Set its flex-basis to 240px to force the other items to dynamically squish!

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1If you want a search bar to expand and fill all available horizontal space between a logo and a profile picture, what property do you apply to the search bar?
  2. 2What is `flex-basis`?
  3. 3By default, flex items have `flex-shrink: 1`. What does this mean?

Remember this

  • flex-grow: 1 lets an item consume leftover space.
  • flex-shrink: 0 stubbornly prevents an item from squishing.
  • flex-basis is the item's ideal starting size.
  • order visually swaps items, but breaks keyboard navigation flow.

Done with this concept?

Mark it complete to track your progress. No login needed.