Flex Items

The container properties control the group, but the flex item properties let each item decide how it behaves individually. This is where flexbox gets really powerful.

Flex Grow

flex-grow controls how much an item should grow relative to its siblings when there is extra space. The default is 0, meaning the item will not grow.

.item {
  flex-grow: 1; /* takes up remaining space */
}

.item.double {
  flex-grow: 2; /* takes up twice as much */
}
    

If all items have flex-grow: 1, they share the extra space equally. If one has 2 and the rest have 1, that item gets twice the space.

Flex Shrink

flex-shrink is the opposite of grow. It controls how much an item shrinks when there is not enough space. Default is 1, meaning items can shrink.

.item {
  flex-shrink: 1; /* default — can shrink */
}

.item.no-shrink {
  flex-shrink: 0; /* refuses to shrink */
}
    

Set flex-shrink: 0 on items that should keep their size no matter what — like icons or buttons.

Flex Basis

flex-basis sets the starting size of an item before grow or shrink kick in. Think of it as the "ideal size" before the browser adjusts things.

.item {
  flex-basis: 200px; /* starts at 200px */
}
    

It can be a fixed length, a percentage, or auto (the default, which uses the item's width or content size).

The Flex Shorthand

You will rarely see flex-grow, flex-shrink, and flex-basis written separately. Instead, use the flex shorthand:

.item {
  flex: 1;                    /* grow: 1, shrink: 1, basis: 0 */
  flex: 1 0 200px;            /* grow: 1, shrink: 0, basis: 200px */
  flex: 0 1 auto;             /* default — grow: 0, shrink: 1, basis: auto */
}
    

The shorthand makes your code much cleaner. flex: 1 is one of the most common patterns you will see in CSS — it means "take up whatever space is available."